JSFiddle - React, Tailwind, and code Playground

by mariocatch

HTML

<div class="wrapper">
  <button type="button" id="previous">Previous</button>
  <div class="slider">
    <img src="https://www.kasandbox.org/programming-images/food/mushroom.png" class="slide">
    <img src="https://www.kasandbox.org/programming-images/avatars/mr-pink.png" class="slide">
  </div>
  <button type="button" id="next">Next ➡</button>
</div>

CSS

.wrapper {
  padding: 50px;
}

.slider {
  display: inline-block;
}

.slider > .slide {
  width: 200px;
}

.slider > .slide {
  display: none;
}

.slider > .slide.active {
  display: block;
}

JavaScript

$(document).ready(function() {
  // Grab all slides from each slider.
  var slides = $('.slider').children($('.slide'));

  // Initialise first slide to active.
  slides.first().addClass('active');

  $('#next').click(function() {
    var activeSlide = slides.filter('.active');
    var activeSlideIndex = slides.index(activeSlide);
    var nextSlideIndex = 0;
    var nextSlide;
    if (activeSlideIndex === slides.length - 1) {
      nextSlideIndex = 0;
    } else {
      nextSlideIndex = activeSlideIndex + 1;
    }
    nextSlide = slides.index(nextSlideIndex);
    activeSlide.removeClass('active');
    nextSlide.addClass('active');
  });
});