JSFiddle - React, Tailwind, and code Playground

HTML

<div class="rotator">
  <ul class="slides">
    <li class="slide"><img src="http://stevensegallery.com/720/200" alt="first"></li>
    <li class="slide"><img src="http://placebeard.it/720/200" alt="third"></li>
    <li class="slide"><img src="http://placekitten.com/g/720/200" alt="second"></li>
    <li class="slide"><img src="http://placebeard.it/720/200?15" alt="second"></li>
  </ul>
</div>

<div class="rotator">
  <ul class="slides">
    <li class="slide"><img src="http://stevensegallery.com/720/200" alt="first"></li>
    <li class="slide"><img src="http://placebeard.it/720/200" alt="third"></li>
    <li class="slide"><img src="http://placekitten.com/g/720/200" alt="second"></li>
    <li class="slide"><img src="http://placebeard.it/720/200?15" alt="second"></li>
    <li class="slide"><img src="http://placekitten.com/g/720/200" alt="second"></li>
    <li class="slide"><img src="http://placebeard.it/720/200?15" alt="second"></li>
  </ul>
</div>

CSS

.rotator {
  width: 210px;
}

.rotator ul {
  height: 375px;
  position: relative;
}

.rotator ul li {
  height: 100%;
  text-decoration: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.rotator ul li.prev {
  z-index: 2;
}

.rotator ul li.active {
  z-index: 3;
}

.rotator .nav {
  height: 25px;
  text-align: center;
  -webkit-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: default;
}

.rotator .nav div {
  display: inline-block;
  height: 100%;
  width: 14px;
  cursor: pointer;
}

.rotator .nav div span {
  display: inline-block;
  border: 1px solid #7f7f7f;
  border-radius: 4px;
  height: 4px;
  width: 4px;
}

.rotator .nav div.active span {
  background-color: #7f7f7f;
}

JavaScript

$('.slides').each(function() {
  var $el = $(this),
  $target = $el.find('li');
  $count = $target.length;
  console.log($count);
  $target.eq(0).show().siblings().hide();
});