loudenw

HTML

<nav>
            <div class="row">
            <div class="col">
                <p class="text-center">
                <a href="#" onclick="toggler('slide1');"></a>
                </p>
            </div>
            <div class="col">
                <p class="text-center">
                <a href="#slide2"></a>
                </p>
            </div>
            <div class="col">
                <p class="text-center">
                <a href="#" onclick="toggler('slide1');">slide 1</a>
                </p>
            </div>
            <div class="col">
                <p class="text-center">
                <a href="#" onclick="toggler('slide2');">slide 2</a>
                </p>
            </div>
            <div class="col">
                <p class="text-center">
                <a href="#" onclick="toggler('slide3');">slide 3</a>
                </p>
            </div>
            <div class="col">
                <p class="text-center">
                <a href="#" onclick="toggler('slide4');">slide 4</a>
                </p>
            </div>
            <div class="col">
                <p class="text-center">
                <a href="#" onclick="toggler('slide5');">slide 5</a>
                </p>
            </div>
            <div class="col">
                <p class="text-center">
                <a href="#slide2"></a>
                </p>
            </div>
            <div class="col">
                <p class="text-center">
                <a href="#slide2"></a>
                </p>
            </div>
            </div>
        </nav>
        
    </div>
    </div>
    
    <main>
        
        <div class="container">
            <div id="slide1" class='hidden'>
                
            <div class="row">
                
            <div class="col">
                <div class="grow">
                <img src="img.jpg">
                </div>
            </div>    

            <div class="col">
                 <div class="grow">
  ...

CSS

html {
    overflow-y: scroll;
}

.container-fluid {
    position: fixed;
    z-index: 1000;
}

header {
    width: 100%;
    height: 40px;
    padding: 10px 0 10px 0;
    background-color: #fff;
}

nav {
    width: 100%;
    height: 30px;
    margin: 0;
    background-color: #fff;
    border-bottom: 1px solid #dededd;
}

nav .col a {
    color: #a9a9a0;
    text-decoration: none;
}

nav .col a:hover {
    color: #f99427;
}

nav .col a:active {
    color: #000000;
}

main .container {
    width: 100%;
    margin-top: 100px;
    z-index: 900;
}

main .col {
    width: 100%;
}

img {
    width: 100%;
}

.grow { transition: all .2s ease-in-out; }
.grow:hover { transform: scale(1.1); }

.hidden {
	display:none;
}

JavaScript

function toggler(divId) {
    $("#" + divId).toggle();
}