JSFiddle - React, Tailwind, and code Playground

by cmruser

HTML

<div id="slideshow" data-slideshow="static" data-random>
        <div><a href="#" style="background-image: url('slider/img0.jpg');">1</a></div>
        <div><a href="#" style="background-image: url('slider/img1.jpg');">2</a></div>
        <div><a href="#" style="background-image: url('slider/img2.jpg');">3</a></div>
        <div><a href="#" style="background-image: url('slider/img3.jpg');">4</a></div>
        <div><a href="#" style="background-image: url('slider/img4.jpg');">5</a></div>
        <nav>
          
        </nav>
    </div>
    <div id="slideshownav">
        <a id="nav0" class="navselected">Slide 0</a>
        <a id="nav1">Slide 1</a>
        <a id="nav2">Slide 2</a>
        <a id="nav3">Slide 3</a>
        <a id="nav4">Slide 4</a>
    </div>

CSS

#slideshow { position: relative;width: 713px; height: 310px;}
#slideshow div:not(:first-child) { display:none; }
    #slideshow div { position: absolute; top: 0;left: 0;}  
    #slideshow a {display: block;width:713px;height:310px; }    
    #slideshow a:hover{background-position: center bottom;}

    #slideshownav a.navselected{color:#EB910C;}
    #slideshownav {text-align:left;padding-top:8px;padding-bottom:20px;}
    #slideshownav a {padding-right:10px;color:#748090;font-size:10px;}
    #slideshownav a:hover {cursor:pointer;}

JavaScript

$(document).ready(function () {
            //$("#slideshow div:gt(0)").hide();

            var index = 0;
            var totalslides = 5;

            var nextSlide = function () {
            
                $('#slideshow div').eq(index).fadeOut(1000);
                $('#nav' + index).toggleClass('navselected');
                
                index++;
                
                if (index > totalslides - 1) { 
                	index = 0; 
                }
                
                $('#slideshow div').eq(index).fadeIn(1000);
                $('#nav' + index).toggleClass('navselected');
            }
            
            var nextSlideTimer = setInterval(nextSlide, 4000);

            function nav(selectedSlide) {
            
                clearInterval(nextSlideTimer);

                $('#slideshow div').eq(index).fadeOut(1000);
                $('#nav' + index).toggleClass('navselected');
                
                index = selectedSlide;
                
                $('#slideshow div').eq(index).fadeIn(1000);
                $('#nav' + index).toggleClass('navselected');

                //nextSlideTimer = setInterval(nextSlide, 4000);
            }

            $("#nav0").click(function () { nav(0); });
            $("#nav1").click(function () { nav(1); });
            $("#nav2").click(function () { nav(2); });
            $("#nav3").click(function () { nav(3); });
            $("#nav4").click(function () { nav(4); });
        });