JSFiddle - React, Tailwind, and code Playground

by Matteo Melillo

HTML

<div class="thumbs-container">
    <a class="slide-arrow sx-arrow" href="javascript:void(0);">&laquo;</a>
    <a class="slide-arrow dx-arrow" href="javascript:void(0);">&raquo;</a>
    <div id="thumbs">
        <ul class="thumbs-wrapper clearfix">
            <li class="thumb gradient1"></li>
            <li class="thumb gradient2"></li>
            <li class="thumb gradient3"></li>
            <li class="thumb gradient4"></li>
            <li class="thumb gradient5"></li>
            ...
        </ul>
    </div>
</div>

CSS

.thumbs-container{
    position:relative;
    width:540px;
    height:360px;
    margin-left:150px;
}
.thumbs-container .slide-arrow{
    display:block;
    width:64px;
    height:96px;
    position:absolute;
    top:60px;
    left:-40px;
    font-family:Georgia,serif;
    text-decoration:none;
    color:#3c3c3c;
    font-size:30px;
}
.thumbs-container .slide-arrow.dx-arrow{
    left:auto;
    right:-85px;
}
#thumbs{
    width: 540px;
    height: 360px;
    overflow: hidden;
    position: relative;
}
.thumbs-wrapper{
    position: absolute;
    width: 3000em;
    top: 0;
    left: 0;
}
.thumbs-wrapper .thumb {
    float: left;
    width: 160px;
    height: 100px;
    margin: 30px 30px 0 0;
}
.thumbs-wrapper .thumb.gradient1 {
    background-image: #4e4e48;
    background-image: -webkit-linear-gradient(bottom right, #de55d7 0%, #0d9602 100%, #000000 100%);
    background-image: -moz-linear-gradient(bottom right, #de55d7 0%, #0d9602 100%, #000000 100%);
    background-image: -o-linear-gradient(bottom right, #de55d7 0%, #0d9602 100%, #000000 100%);
    background-image: -ms-linear-gradient(bottom right, #de55d7 0%, #0d9602 100%, #000000 100%);
    background-image: linear-gradient(bottom right, #de55d7 0%, #0d9602 100%, #000000 100%);
}
.thumbs-wrapper .thumb.gradient2 {
    background-image: #6a7259;
    background-image: -webkit-linear-gradient(top left, #eb622d 0%, #52f5df 100%, #000000 100%);
    background-image: -moz-linear-gradient(top left, #eb622d 0%, #52f5df 100%, #000000 100%);
    background-image: -o-linear-gradient(top left, #eb622d 0%, #52f5df 100%, #000000 100%);
    background-image: -ms-linear-gradient(top left, #eb622d 0%, #52f5df 100%, #000000 100%);
    background-image: linear-gradient(top left, #eb622d 0%, #52f5df 100%, #000000 100%);
}
.thumbs-wrapper .thumb.gradient3 {
    background-image: #70415c;
    background-image: -webkit-linear-gradient(bottom, #ff2b1f 0%, #5297f5 100%, #000000 100%);
    background-image:...

JavaScript

var width      = -($('.thumbs-wrapper li').outerWidth() + (parseInt($('.thumbs-wrapper li').css('marginRight')))),
    slider = $('.thumbs-wrapper'),
    move   = false,
    start  = width*($('.thumbs-wrapper').find('.thumb').size());
 
$('.thumbs-wrapper').find('.thumb').clone().addClass('cloned').appendTo($('.thumbs-wrapper'));
$('.thumbs-wrapper').find('.thumb.cloned').clone().addClass('cloned').insertBefore($('.thumbs-wrapper .thumb:first-child'));
slider.css("left", start + "px");
 
$('.sx-arrow').click(function(){
    if (!move) {
        move = true;
        slider.animate({
            left: '-=' + width
        }, function() {
                if ( parseInt(slider.css('left')) == 0 ) {
                    slider.css("left", start + "px");
                }
                move = false;
            }
        );
    };
})
 
$('.dx-arrow').click(function(){
    if (!move) {
        move = true;
        slider.animate({
            left: '+=' + width
        }, function() {
                if ( parseInt(slider.css('left')) == 2 * start ) {
                    slider.css("left", start + "px" );
                };
                move = false;
            }
        )
    };
});