JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<div id="slider_mask">

    <div class="slide_container">
        
        <div class="slide"><p>Slide One</p></div>
        <div class="slide"><p>Slide Two</p></div>
        <div class="slide"><p>Slide Three</p></div>
        <div class="slide"><p>Slide Four</p></div>
        <div class="slide"><p>Slide Five</p></div>
        <div class="slide"><p>Slide 22</p></div>
        <div class="slide"><p>Slide 33</p></div>
        <div class="slide"><p>Slide 33</p></div>

    </div>
    
    <div class="left_button"><</div>
    <div class="right_button">></div>
    
</div>

CSS

#slider_mask {

    width:980px;
    height:200px;
    overflow:hidden;  
    border:1px solid #000;
    position:relative;

}

#slider_mask .slide_container {

    height:200px;

}

#slider_mask .slide {

    width:980px;
    height:200px;
    float:left;  
    text-align:center;
    background-color:#f1f1f1;
    
}

#slider_mask .left_button {
 
    position:absolute;
    padding:5px;
    left:0px;
    top:90px;
    
}

#slider_mask .right_button {
    
    position:absolute;
    padding:5px;
    right:0px;
    top:90px;
    
}

JavaScript

// Setup Variables
var slides = $('#slider_mask .slide_container').children();
var total_slides = slides.children().length;
var slide_width = $('#slider_mask').width();
var current_slide = 0;

    // Set the width of the slide_container
    $('#slider_mask .slide_container').width(slide_width*total_slides);

    // Handel Right Arrow Click
    $('#slider_mask .right_button').on('click', function() {
        
        current_slide++;
        
        if(current_slide == total_slides){ current_slide = 0; }
        
        var negative_margin_required = current_slide*slide_width;
        $('#slider_mask .slide_container').stop().animate({marginLeft:-negative_margin_required+'px'},'fast');
        
        
    });
    
    // Handel Left Arrow Click
    $('#slider_mask .left_button').on('click', function() {
        
        current_slide--;
        
        if(current_slide < 0){ current_slide = total_slides-1; }
        
        var negative_margin_required = current_slide*slide_width;
        $('#slider_mask .slide_container').stop().animate({marginLeft:-negative_margin_required+'px'},'fast');
        
    });