JSFiddle - React, Tailwind, and code Playground

by JordanBlount

HTML

<div id="slideshowCtr" class="glow">
    <div id="imgRoll">
        <img src="http://placehold.it/640x310" alt="1" width="635" height="287" />
        <img src="http://placehold.it/640x310" alt="2" width="615" height="277" />
        <img src="http://placehold.it/640x310" alt="3" width="615" height="278" />
        <img src="http://placehold.it/640x310" alt="4" width="615" height="278" />
        <img src="http://placehold.it/640x310" alt="5" width="615" height="277" />
    </div>
    <a id="next">next</a>
    <a id="prev">prev</a>
</div>

CSS

body {
        background-color: #d6d6d6;
    }
    
    div#slideshowCtr {
        width: 640px;
        height: 310px;
        margin: auto;
        overflow: hidden;
    }
    
    div.glow {
        box-shadow: 0px 2px 3px #fff;
    }
    
    div#imgRoll {
        height: inherit;
        position: relative;
        left: 0px;
    }
    
    div#imgRoll img {
        float: left;
        position: relative;
    }
    
    a#next, a#prev {
        width: 90px;
        display: none;
        background-color: rgba(0,0,0,0.7);
        color: #fff;
        text-transform: uppercase;
        text-align: center;
        font-size: 15px;
        font-family: Helvetica, sans-serif;
        padding: 4px 10px 4px 10px;
        position: relative;
        top: -250px;
    }
    
    a#next:hover, a#prev:hover {
        background-color: #000;
        cursor: pointer;
    }
    
    a#next {
        border-radius: 6px 0px 0px 6px;
        float: right;
    }
    
    a#prev {
        border-radius: 0px 6px 6px 0px;
        float: left;
    }

JavaScript

$(document).ready(function() {
        
        // get the size of the slideshow container
        var ctrHeight = $('#slideshowCtr').css('height');
        var ctrWidth = $('#slideshowCtr').css('width');
        
        // get number of images and set width of imgRoll
        var imgTotal = $('div#imgRoll > img').size(); 
        var imgRollWidth = imgTotal * parseInt(ctrWidth);
        $('div#imgRoll').css('width', imgRollWidth);
        
        // set images to the size of the slideshow viewport    
        $('div#imgRoll img').css('height',ctrHeight);
        $('div#imgRoll img').css('width', ctrWidth);
        
        // set maximum scroll distance
        var maxScroll = imgRollWidth - parseInt(ctrWidth) + 'px';
        
        // on slideshow hover show controls
        $('div#slideshowCtr').hover(function() {
            $('a#next, a#prev').fadeIn('fast');
        }, function() {
            $('a#next, a#prev').fadeOut('fast');
        });
        
        // move to next right image
        $('a#next').click(function() {
            // unless on the last image
            if ($('div#imgRoll').css('left') == '-' + maxScroll)
            {
                $('div#imgRoll').animate({left: '0px'}, 'slow');
            } else {
                $('div#imgRoll').animate({
                    left: '-=' + parseInt(ctrWidth) + 'px'
                }, 'slow');
            }
        });
        
        // move to next left image
        $('a#prev').click(function() {
            // unless on the last image
            if ($('div#imgRoll').css('left') == '0px')
            {
                $('div#imgRoll').animate({left: '-' + maxScroll}, 'slow');
            } else {
                $('div#imgRoll').animate({
                    left: '+=' + parseInt(ctrWidth) + 'px'
                }, 'slow');
            }
        });
        
        
        // auto start slideshow
        function slide(){$('a#next').click();}

        // simulate click every 3 seconds
  ...