JSFiddle - React, Tailwind, and code Playground

by andrey90vs

HTML

<body>
    

    <div id="slideshow">
       <a href="#" class="slideshow-prev">&laquo;</a> 
       <ul>
            <li><img src="https://cdn.tutsplus.com/psd/uploads/2013/12/FilterForge4_18b.jpg" alt="photo1" /></li>
            <li><img src="http://www.wix.com/blog/wp-content/uploads/2012/01/Nintendo.jpg" alt="photo2" /></li>
            <li><img src="http://slodive.com/wp-content/uploads/2013/01/fashion-logos/levis-logo.jpg" alt="photo3" /></li>
            <li><img src="https://cdn.tutsplus.com/psd/uploads/2013/12/FilterForge4_18b.jpg" alt="photo4" /></li>
       </ul>
        <a href="#" class="slideshow-next">&raquo;</a> 

    </div>

    <!-- 
        We use Google's CDN to serve the jQuery js libs. 
        To speed up the page load we put these scripts at the bottom of the page 
    -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    
    <script>

        //an image width in pixels 
        var imageWidth = 600;
    

        //DOM and all content is loaded 
        $(window).ready(function() {
            
            var currentImage = 0;

            //set image count 
            var allImages = $('#slideshow li img').length;
            
            //setup slideshow frame width
            $('#slideshow ul').width(allImages*imageWidth);

            //attach click event to slideshow buttons
            $('.slideshow-next').click(function(){
                
                //increase image counter
                currentImage++;
                //if we are at the end let set it to 0
                if(currentImage>=allImages) currentImage = 0;
                //calcualte and set position
                setFramePosition(currentImage);

            });

            $('.slideshow-prev').click(function(){
                
                //decrease image counter
                currentImage--;
                //if we are at the end let set it to 0
                if(currentImage<0) currentImage =...

CSS

body{
            text-align: center;
        }
        
        #slideshow{
            margin:0 auto;
            width:600px;
            height:450px;
            overflow: hidden;
            position: relative;
        }

        #slideshow ul{
            list-style: none;
            margin:0;
            padding:0;
            position: absolute;
        }

        #slideshow li{
            float:left;
        }

        #slideshow a:hover{
            background: rgba(0,0,0,0.8);
            border-color: #000;
        }

        #slideshow a:active{
            background: #990;
        }

        .slideshow-prev, .slideshow-next{
            position: absolute;
            top:180px;
            font-size: 30px;
            text-decoration: none;
            color:#fff;
            background: rgba(0,0,0,0.5);
            padding: 5px;
            z-index:2;
        }
        
        .slideshow-prev{
            left:0px;
            border-left: 3px solid #fff;
        }

        .slideshow-next{
            right:0px;
            border-right: 3px solid #fff;
        }