JSFiddle - React, Tailwind, and code Playground

by c2webdev

HTML

<div id="banner-wrapper">
                        <div id="home-slider">
                            <div class="slide">
                                <p>some text 1</p>
                            </div><!--close slide-->
    
                            <div class="slide">
                                <p>some text 2</p>
                            </div><!--close slide-->
    
                            <div class="slide">
                                <p>some text 3</p>
                            </div><!--close slide-->
    
                            <div class="slide">
                                <p>some text 4</p>
                            </div><!--close slide-->
                                
                        </div><!--close home-slider-->
                        
                             
                        <div id="slide_menu" class="group">
                            <ul>
                                <li class="menuItem act"><a href="" title="">1</a></li>                
                                <li class="menuItem inact"><a href="" title="">2</a></li>
                                <li class="menuItem inact"><a href="" title="">3</a></li>
                                <li class="menuItem inact"><a href="" title="">4</a></li>
                            </ul>
                        </div><!--close slide_menu-->
                    </div><!--close banner-wrapper-->

CSS

#banner-wrapper {width:960px; overflow:hidden; height:490px; margin:0 auto; position:relative;}
#home-slider {width:960px; position:relative;}
#home-slider .slide {float:left; width:960px; position:relative;}
#home-slider .slide p {width:200px; height:200px; padding:10px; }
#slide_menu {position:absolute; bottom:20px; left:517px; z-index:210;}
#slide_menu li {position:relative; float:left; margin-right:20px;}
#slide_menu li a {background-color:#333; width:16px; height:16px; display:block; text-indent:-9999px;}
#slide_menu li a:hover {background-color:#666;}
#slide_menu li.act a {background-color:#800000;}

JavaScript

var totWidth=0;
var positions = [];  
var current = 1;
jQuery('#home-slider .slide').each(function(i){

    positions[i]= totWidth;
    totWidth += jQuery(this).width();

});
jQuery('#home-slider').width(totWidth);
/* Change the cotnainer div's width to the exact width of all the slides combined */
jQuery('#slide_menu ul li a').click(function(e,keepScroll){


    jQuery('li.menuItem').removeClass('act').addClass('inact');
    jQuery(this).parent().addClass('act');

    var pos = jQuery(this).parent().prevAll('.menuItem').length;
    jQuery('#home-slider').stop().animate({marginLeft:-positions[pos]+'px'},350);

    /* Prevent the default action of the link */
    e.preventDefault();
    current = pos;

    // Stopping the auto-advance if an icon has been clicked:
    if(!keepScroll) {clearItvl();}
});

    var itvl = null;

    function autoAdvance() {
        if(current === -1) { return false; }
        jQuery('#slide_menu ul li a').eq(current%jQuery('#slide_menu ul li a').length).trigger('click',[true]);    
        current++;
        itvl = setTimeout(autoAdvance,3000);

    }
    function clearItvl() {
      clearTimeout(itvl);
      autoAdvance(); 
    }

 setTimeout(autoAdvance,3000);