JSFiddle - React, Tailwind, and code Playground

by Adam Poczatek

HTML

<div id="sliderContainer">
    <img src="http://www.helptionary.com/wp-content/uploads/2010/06/greener-grass.jpg" width="350" height="250" />
    <img src="http://greenlawngarden.com/wp-content/uploads/2010/09/green_grass.jpg" width="350" height="250" />
    <img src="http://macpcfirstaid.com/images/grass_15mb.jpg" width="350" height="250" />
</div>

CSS

$(document).ready(function() {
       var itemWidth = $('#carousel li').outerWidth() + 10;
       
       $('#carousel li:first').before($('#carousel li:last') );
       $('#carousel').css({ left: -itemWidth });
       
       $('#rightButton').click( function(){
               $('#carousel').animate( { left: '+=' + itemWidth }, {queue:false, duration:500, complete: function(){
                               $('#carousel li:first').before( $('#carousel li:last') );
                               $('#carousel').css( { left: -itemWidth } );
                       }
               });
       });

       $('#leftButton').click( function(){
               $('#carousel').animate( { left: '-=' + itemWidth }, {queue:false, duration:500, complete: function(){
                               $('#carousel li:last').after( $('#carousel li:first') );
                               $('#carousel').css( { left: -itemWidth } );
                       }
               });
       });
});

JavaScript

// Building the slideshow
function buildSlideshow() {
    var imgWidth = $('#sliderContainer img').width();
    var imgHeight = $('#sliderContainer img').height();
    
    $('#sliderContainer').css({
        width : imgWidth,
        height : imgHeight,
        position : 'relative',
        overflow : 'hidden'
    }).find('img').each(function() {
        $(this).wrap('<div class="slide" style="float: left" />');
    });
    
    var sliderTotalWidth = $('.slide').length * $('.slide').outerWidth(true);
    
    $('#sliderContainer').wrapInner('<div id="sliderWrapper" style="position: absolute; height: '+ imgHeight +'px; width: '+ sliderTotalWidth +'px" />');
    
    var slideNumber = 0;
    $('.slide img').each(function() {
        slideNumber++;
        $(this).addClass('slide-' + slideNumber);
    });
}

function buildControls(type) {
    $('#sliderContainer').append('<div id="sliderNav" style="position: absolute; bottom: 0" />');
    
    var rel = 0;
    $('.slide').each(function() {
        rel++;
        if( type == 'image') {
            var imgURL = $('img', this).attr('src');
            $('#sliderNav').append('<img class="trigger" src="'+ imgURL +'" width="60" rel="'+ rel +'" />');
        } else {
            $('#sliderNav').append('<span class="trigger" rel="'+ rel +'">'+ rel +'</div>');
        }
    });
}

buildSlideshow();
buildControls('image');