JSFiddle - React, Tailwind, and code Playground

by ashleycam3ron

HTML

<div id="main">
    <li>image1</li>
    <li>image2</li>
    <li>image3</li>
</div>
<div id="copy">
    <ul>
        <li class="n1"><a href="#">1</a></li>
        <li class="n2"><a href="#">2</a></li>
        <li class="n3"><a href="#">3</a></li>
    </ul>
</div>

CSS

#main{
    height:202px; /*viewport height*/
    width:9999px;
    position:relative;
}
#main li{
    height:200px; /*slide height*/
    width:300px; /*slide width*/
    border:black solid 1px; /*remove*/
    float:left;
    position:absolute;
    display:none;
}
#main li:nth-child(1){
    display:block;
}
#copy{
    width:35px; /*NAV viewport width*/
    overflow:hidden;
}
#copy ul{
    width:9999px;
}
#copy li{
    list-style-type:none;
    display:inline;
}

JavaScript

/*$('#copy ul li a').click(function() {
    var num = $(this).html();
    $('#main li').fadeOut();
    $('#main :nth-child(' + num + ')').fadeIn();
});
*/

$('#copy ul li a').click(function() {
    $('#main li .n').fadeOut();
    $('#main :nth-child').fadeIn('.n1');
});