JSFiddle - React, Tailwind, and code Playground

by LyndseyB

HTML

<div id="wrapper">
    <div id="img-container">
        <div class="active"> Div1 </div>
        <div> Div2 </div>
        <div> Div3 </div> 
        <div> Div4 </div> 
        <div> Div5 </div> 
        
       
    </div>
</div>

CSS

#wrapper { width: 90%; margin: 0 auto; }
#img-container { position:relative; background: black; border:1px black solid;height:200px; }
#img-container div { position:absolute; background:lightblue; text-align:center; color:white; }

JavaScript

//option for setting load animation. if false, automatically position images on load. if true, set animation to run divs out to page in sequence
$(function() {    
    //container element
    Container = $('#img-container');
    //div elements
    Div = $('#img-container').find('div');
    //number of divs
    DivCount = Div.length;    
    //max container width
    var MaxWidth = Container.width();
    //percentage width of container relative to parent
    MaxWidthP = MaxWidth/$('#wrapper').width()*100;    
    //width of wrapper or container 
    WrapWidth = Container.parent().width();  
    //set width of each div relative to container 
    DivWidth = 100/DivCount;
    DivWidth = DivWidth.toFixed(2); 
    //set percentage width of each
    Div.css("width", DivWidth+'%'); 
    //divide the number of divs by the width of the container
    elWidth = MaxWidth/DivCount;     
        
    //create carousel
    /*
    Div.not('.active').each(function(index) {        
        counter = index + 2; //exclude the active div 
        $current_div = $('#img-container div:nth-child(' + counter + ')');                        
        animate_div($current_div, elWidth*(index+1), counter);             
    });    

    //animate function
    function animate_div(div, position, index) {      
        //move div
        $(div).delay(200*index).animate({ 
            left: position +'px'
        }, 500, function() { 
            //animation complete              
        });        
    }  
    */
});

(function( $ ) {
  $.fn.imgCarousel = function( options ) {
     // Create some defaults, extending them with any options that were provided
    var settings = $.extend( {
        autoAnimate: true
    }, options);

    //container element
    Container = this;
    //div elements
    Div = Container.find('div');
    //number of divs
    DivCount = Div.length;    
    //max container width
    MaxWidth = Container.width();
    //percentage width of container relative to parent
   ...