JSFiddle - React, Tailwind, and code Playground

by Megi93

HTML

<div class="container-fluid">
  <div class="row">
    <!-- Container for slider -->
    <section class="sliderContainer">
      <!-- Buttons for slider -->
      <div class="buttons">
        <button class="btn btn-primary prev">Previous</button>
        <button class="btn btn-primary next">Next</button>
      </div>
      <!-- Container for images -->
      <div class="images">
        <div>
          <img src="https://raw.githubusercontent.com/Gruja13/Carousel-jQuery/master/img/cover1.jpg" />
        </div>
        <div>
          <img src="https://raw.githubusercontent.com/Gruja13/Carousel-jQuery/master/img/cover2.jpg" />
        </div>
        <div>
          <img src="https://raw.githubusercontent.com/Gruja13/Carousel-jQuery/master/img/cover3.jpg" />
        </div>
      </div>
    </section>
  </div>
</div>

CSS

// Container for slider
  .sliderContainer {
    position: relative;
    width: 60%;
    height: auto;
    margin: auto;
    box-shadow: 2px 2px 20px #333;
    //Buttons
    .buttons {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100%;
      .prev {
        position: relative;
        left: -50px;
        float: left;
        width: 80px;
      }
      .next {
        position: relative;
        right: -50px;
        float: right;
        width: 80px;
      }
    }
    //Container for images
    .images {
      width: 100%;
      div {
        width: 100%;
        display: inline-block;
        display: none;
      }
      img {
        width: 100%;
        height: auto;
      }
    }
  }

JavaScript

//Variable oznacava prvu pocetnu sliku i poziciju
var currentIndex = 0,
    //Varieable oznacava children unutar parenta
    items = $('.images div'),
    //I ukupan broj koliko ih ima
    itemMain = items.length;

//Funkcija obuhvata sve unutrasnje div-ove, pravi niz
function cycleItems() {
  //U koliko je trenutni item jednak currentIndex [0]
  var item = $('.images div').eq(currentIndex);
  //..sakriji taj div
  items.hide();
  //Prikazi ih u redu
  item.css('display','inline-block');
}
//Variable autoSlide pokrece funkciju
var autoSlide = setInterval(function() {
  //..da se na currentIndex [0] doda sledeci sa [1]
  currentIndex += 1;
  //U koliko je currentIndex na vecoj poziciji [1]
  if (currentIndex > itemMain - 1) {
    //..vrati ga na pocetnu poziciju [0]
    currentIndex = 0;
  }
  cycleItems();
  //Predji na drugi slajd za 4sek.
}, 4000);

//Klikom na next button pokrece se funkcija
$('.next').click(function() {
  //..da se aut. promeni na sledeci slajd
  clearInterval(autoSlide);
  //..i na currentIndex doda prvi sledeci [1]
  currentIndex += 1;
  //U koliko je currentIndex na vecoj poziciji [1]
  if (currentIndex > itemMain - 1) {
    //..vrati ga na pocetnu poziciju [0]
    currentIndex = 0;
  }
  cycleItems();
});

//Klikom na prev button pokrece se funkcija
$('.prev').click(function() {
  //..da se slajd aut. promeni
  clearInterval(autoSlide);
  //..i da se na currentIndex sa [0] ide unazad za [1]
  currentIndex -= 1;
  //..a u koliko je currentIndex manji od [0]
  if (currentIndex < 0) {
    //..vrati na poziciju -[1]
    currentIndex = itemMain - 1;
  }
  cycleItems();
});