JSFiddle - React, Tailwind, and code Playground

by Silambarasan_sundaram

HTML

<div id="main">
    <div id="box1" class="box">Slide-1</div>
    <div id="box2" class="box">Slide-2</div>
    <div id="box3" class="box">Slide-3</div>
    <div id="box4" class="box">Slide-4</div>
    
</div>
<div><ul class="countval" id="countval"></ul></div>

CSS

.countval{    
    background-color:blue;
    color:#FFF;
    list-style:none;
    float:left;
}
.countval .button{
    display:inline;
    margin:0 10px 0 10px;           
}
.countval .button:hover{
    color:red;    
}
#main{
    background-color:yellow;
}
.box {
    position: absolute;
    width: 50%;
    height: 300px;
    line-height: 300px;
    font-size: 50px;
    text-align: center;
    border: 2px solid black;
    left: 150%;
    top: 100px;
    margin-left: -25%;
}

#box1 {
    background-color: green;
    left: 50%;
}

#box2 {
    background-color: yellow;
}

#box3 {
    background-color: red;
}

#box4 {
    background-color: orange;
}

JavaScript

jQuery(function($) {
   var $vv = $('#main').find('div').length; 
    for(i=0; i<$vv; i++){ 
    $("#countval").append('<li class="button">0</li>');   
    }
    
    $('.button').click(function() {
    var index = $(this).index(".button");
    var $box = $(".box:eq(" + index + ")");

    $(".box").not($box).animate({
        left: '150%'
    }, 500);

    if ($box.offset().left < 0) {
        $box.css("left", "150%");
    } else if ($box.offset().left > $('#container').width()) {
        $box.animate({
            left: '50%',
        }, 500);
    }
});    
});