JSFiddle - React, Tailwind, and code Playground

by myislandshop

HTML

<div id="main">
            <div id="gallery">
                <div id="slides">
                    <div class="slide">1
                    </div>
                    <div class="slide">2
                    </div>
                    <div class="slide">3
                    </div>
                    <div class="slide">4
                    </div>
                    <div class="slide">5
                    </div>
                
                </div>
                <div id="menu">
                    <ul>
                    
                        <li class="menuItem">
                            <a href="">1</a>
                        </li>
                        <li class="menuItem">
                            <a href="">2</a>
                        </li>
                        <li class="menuItem">
                            <a href="">3</a>
                        </li>
                        <li class="menuItem">
                            <a href="">4</a>
                        </li>
                        <li class="menuItem">
                            <a href="">5</a>
                        </li>
                    
                    </ul>
                </div>
            </div>
        </div>

CSS

/* Gallery styles */

#gallery{
    /* CSS3 Box Shadow */
    -moz-box-shadow:0 0 3px #AAAAAA;
    -webkit-box-shadow:0 0 3px #AAAAAA;
    box-shadow:0 0 3px #AAAAAA;
    
    /* CSS3 Rounded Corners */
    
    -moz-border-radius-bottomleft:4px;
    -webkit-border-bottom-left-radius:4px;
    border-bottom-left-radius:4px;
    
    -moz-border-radius-bottomright:4px;
    -webkit-border-bottom-right-radius:4px;
    border-bottom-right-radius:4px;
    
    border:1px solid white;
    
    background:url(img/panel.jpg) repeat-x bottom center #ffffff;
    
    /* The width of the gallery */
    width:920px;
    overflow:hidden;
}

#slides{
    /* This is the slide area */
    height:400px;
    
    /* jQuery changes the width later on to the sum of the widths of all the slides. */
    width:920px;
    overflow:hidden;
    
}

.slide{
    float:left;
    width:920px;
}



#menu{
    /* This is the container for the thumbnails */
    height:45px;
}

#menu ul{
    margin:0px;
    padding:0px;
}

#menu li{
    /* Every thumbnail is a li element */
    width:60px;
    display:inline-block;
    list-style:none;
    height:45px;
    overflow:hidden;
    border: solid 2px #000;
}

#menu li.inact:hover{
    /* The inactive state, highlighted on mouse over */
    =
}

#menu li.act,li.act:hover{
    /* The active state of the thumb */
    
}

#menu li.act a{
    cursor:default;
}

#menu .fbar{
    /* The left-most vertical bar, next to the first thumbnail */
    width:2px;
    
}

#menu li a{
    display:block;
    
    height:35px;
    
}



/* The styles below are only necessary for the demo page */

#main{
    /* The main container */
    margin:15px auto;
    text-align:center;
    width:920px;
    position:relative;
}

JavaScript

var totWidth=0;
    var positions = new Array();
    
    $('#slides .slide').each(function(i){
        
        /* Traverse through all the slides and store their accumulative widths in totWidth */
        
        positions[i]= totWidth;
        totWidth += $(this).width();
        
        /* The positions array contains each slide's commulutative offset from the left part of the container */
        
        if(!$(this).width())
        {
            alert("Please, fill in width & height for all your images!");
            return false;
        }
        
    });
    
    $('#slides').width(totWidth);

    /* Change the cotnainer div's width to the exact width of all the slides combined */

    $('#menu ul li a').click(function(e,keepScroll){

            /* On a thumbnail click */

            $('li.menuItem').removeClass('act').addClass('inact');
            $(this).parent().addClass('act');
            
            var pos = $(this).parent().prevAll('.menuItem').length;
            
            $('#slides').stop().animate({marginLeft:-positions[pos]+'px'},450);
            /* Start the sliding animation */
            
            e.preventDefault();
            /* Prevent the default action of the link */
            
            
            // Stopping the auto-advance if an icon has been clicked:
            if(!keepScroll) clearInterval(itvl);
    });
    
    $('#menu ul li.menuItem:first').addClass('act').siblings().addClass('inact');
    /* On page load, mark the first thumbnail as active */