JSFiddle - React, Tailwind, and code Playground

by anay1231

HTML

<div class="wrapper">
    <div id="slider">
        <img id="1" alt="start" src="https://www.bay20.com/wp-content/themes/bay20/images/data/images/eCommerce-Specialists-Banner.jpg">
        <img id="2" alt="1" src="https://www.bay20.com/wp-content/themes/bay20/images/data/images/Conversion-Bay20.jpg">
        <img id="3" alt="2" src="https://www.bay20.com/wp-content/themes/bay20/images/data/images/agileBy-heart-Bay20.jpg">
    </div>
</div>
<div id="nav">
    <a href="#left" class="left">previous</a>
    <a href="#right" class="right">next</a>
</div>

CSS

#wrapper {
    padding:10px 0;
}
#slider {
    height:250px;
    position: relative;
}
#slider img {
    width:600px;
    height:250px;
    top:0;
    position:absolute;
}
#nav {
    background:beige;
    width:200;
    text-align:center;
}

JavaScript

$(function () {
  var count = $("#slider > img").length
  var slider = 1
  var speed=5000
  var fadeSpeed = 300
  var loop 
  start()
  $("#1").fadeIn(fadeSpeed);
  $('.right').click(right)
  $('.left').click(left)
  $('#slider').hover(stop,start)

  function start(){
    loop = setInterval(next, speed)
  }
  function stop(){
    clearInterval(loop)
  }
  function right() {
    stop()
    next()
    start()
    return false
  }

  function left() {
    stop()
    prev()
    start()
    return false
  }

  function prev() {
    slider--
    if (slider < 1) {
      slider = count
    }

    $("#slider > img").fadeOut(fadeSpeed)
    $("#" + slider).fadeIn(fadeSpeed)
  }

  function next() {
    slider++
    if (slider > count) {
      slider = 1
    }

    $("#slider > img").fadeOut(fadeSpeed)
    $("#" + slider).fadeIn(fadeSpeed)
  }
});