JSFiddle - React, Tailwind, and code Playground

by andrey90vs

HTML

<div class="slideshow">
    <div class="carosel">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="clearfix"></div>
    </div>
</div>
<div class="butt">
<div class="prev">PREV</div>
<div class="next">NEXT</div>
</div>

CSS

*{
    margin:0;
    padding:0;
}
.clearfix{
    clear:both;
}
.slideshow{
    border:1px solid red;
    height:104px;
    margin:0 auto;
    position:relative;
}
.carosel{
    display:inline-block;
    height:100px;
    width:auto;
    white-space: nowrap;
    position:absolute;
}
.box{
    display:block;
    float:left;
    width:100px;
    height:100px;
    border:1px solid grey;
    margin-left:5px;
    margin-top:1px;
}
.butt{
    position:relative;
    margin:10px auto;
    width:100px;
}
.next, 
.prev{
    cursor:pointer;
    display:inline;
    border:1px solid blue;
}

JavaScript

width:// Setup --------------------
showBox = 3;

widthBox = $('.box').outerWidth() + parseInt($('.box').css('margin-left'));
allBox = $('.box').length;
widthCarosel = widthBox * allBox;
widthSlideshow = widthBox * showBox;
// ---------------------------
$(document).ready(function(){
console.log('ready for jquery');
console.log(allBox);
$('.carosel').width(widthCarosel);
$('.slideshow').width(widthSlideshow);
});