JSFiddle - React, Tailwind, and code Playground

by Andry Zirka

HTML

<div class="sliderBlock">
  <ul class="sliderBlock_items">
    <li class="sliderBlock_items__itemPhoto sliderBlock_items__showing">
      <img src="img/goods/item1/phones1.png" alt="headphones">
    </li>
    <li class="sliderBlock_items__itemPhoto">
      <img src="img/goods/item1/phones2.png" alt="headphones">
    </li>
    <li class="sliderBlock_items__itemPhoto">
      <img src="img/goods/item1/phones3.png" alt="headphones">
    </li>
    <li class="sliderBlock_items__itemPhoto">
      <img src="img/goods/item1/phones4.png" alt="headphones">
    </li>
    <li class="sliderBlock_items__itemPhoto">
      <img src="img/goods/item1/phones5.png" alt="headphones">
    </li>
  </ul>

  <div class="sliderBlock_controls">
    <div class="sliderBlock_controls__navigatin">
      <div class="sliderBlock_controls__wrapper">
        <div class="sliderBlock_controls__arrow sliderBlock_controls__arrowBackward">
          <i class="fa fa-angle-left" aria-hidden="true"></i>
        </div>
        <div class="sliderBlock_controls__arrow sliderBlock_controls__arrowForward">
          <i class="fa fa-angle-right" aria-hidden="true"></i>
        </div>
      </div>
    </div>

    <ul class="sliderBlock_positionControls">
      <li class="sliderBlock_positionControls__paginatorItem sliderBlock_positionControls__active"></li>
      <li class="sliderBlock_positionControls__paginatorItem"></li>
      <li class="sliderBlock_positionControls__paginatorItem"></li>
      <li class="sliderBlock_positionControls__paginatorItem"></li>
      <li class="sliderBlock_positionControls__paginatorItem"></li>
    </ul>
  </div>


</div>

CSS

.sliderBlock {
  position: relative;
  height: 100%;
  margin-left: 70px;
  margin-top: 89px;
  margin-bottom: 46px;
  overflow: hidden; }

.sliderBlock_items {
  position: relative;
  display: block;
  width: 100%;
  height: 403px; }
  .sliderBlock_items__itemPhoto {
    position: absolute;
    width:300px;
    height: 300px;
    border: 1px solid #000;
    opacity: 0;
    z-index: 2;
    transition: opacity 1s; }
    .sliderBlock_items__itemPhoto:nth-child(1){
      background-color: #f00;
    }
    .sliderBlock_items__itemPhoto:nth-child(2){
      background-color: #ff0;
    }
    .sliderBlock_items__itemPhoto:nth-child(3){
      background-color: #fff;
    }
    .sliderBlock_items__itemPhoto:nth-child(4){
      background-color: #f0f;
    }
    .sliderBlock_items__itemPhoto:nth-child(5){
      background-color: #0ff;
    }
  .sliderBlock_items__showing {
    opacity: 1;
    z-index: 3; }
  .sliderBlock_items:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url("../img/decorElements/DecorRectangle.png") 50% 50% no-repeat;
    opacity: 0.2;
    z-index: 4; }

.sliderBlock_controls {
  width: 100%; }
  .sliderBlock_controls__navigatin {
    margin-top: 8px;
    width: 100%; }
  .sliderBlock_controls__wrapper {
    margin: 1% auto;
    width: 110px;
    height: 20px; }
  .sliderBlock_controls__arrow {
    position: relative;
    width: 24px;
    height: 24px;
    cursor: pointer;
    border: 1px solid #536dfe;
    background-color: #0d2660;
    border-radius: 50%; }
    .sliderBlock_controls__arrow i {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 50%;
      left: 50%;
      margin-left: -50%;
      margin-top: -50%;
      color: #fff;
      font-weight: bold;
      text-align: center;
      font-size: 20px; }
    .sliderBlock_controls__arrow:hover i {
      color: #536dfe; }
  .sliderBlock_controls__arrowBackward {
    float: left; }
 ...

JavaScript

var slider = document.getElementsByClassName("sliderBlock_items");
var slides = document.getElementsByClassName("sliderBlock_items__itemPhoto");
var next = document.getElementsByClassName("sliderBlock_controls__arrowForward");
var previous = document.getElementsByClassName("sliderBlock_controls__arrowBackward");


var currentSlide = 0;
var slideInterval = setInterval(nextSlide, 2000);

function nextSlide() {
  goToSlide(currentSlide + 1);
}

function previousSlide() {
  goToSlide(currentSlide - 1);
}


function goToSlide(n) {
  slides[currentSlide].className = 'sliderBlock_items__itemPhoto';
  currentSlide = (n + slides.length) % slides.length;
  slides[currentSlide].className = 'sliderBlock_items__itemPhoto sliderBlock_items__showing';
}



next.onclick = function() {
  console.log(slides.length);
  nextSlide();
};
previous.onclick = function() {
  previousSlide();
};