JSFiddle - React, Tailwind, and code Playground

by Burduja Serghei

HTML

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
             <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
                         <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="style.css">
             <title>Document</title>
</head>
<body>

  <div class="gallery">
    <div class="photos">
        <img src="https://s5.postimg.org/4amhmjqwn/image.jpg" alt="alt" class="showed">
        <img src="https://s17.postimg.org/rkl2av2cf/image.jpg" alt="alt">
        <img src="https://s5.postimg.org/dieq38q93/image.jpg" alt="alt">
        <img src="https://s5.postimg.org/i4aubm6nb/image.jpg" alt="alt">
        <img src="https://s5.postimg.org/hes1z8qo7/image.jpg" alt="alt">
        <img src="https://s5.postimg.org/h20nt1djb/image.jpg" alt="alt">
    </div>

    <div class="buttons">
        <button class="btn btn-prev">Назад</button>
        <button class="btn btn-next">Вперед</button>
    </div>
  </div>

<script src="script.js"></script>
</body>
</html>

CSS

.gallery {
    margin: 100px auto 40px;
    width: 600px;
}

.gallery .photos {
    position: relative;
    margin-bottom: 30px;
    height: 338px;
}
.gallery img{
    position: absolute;
    max-width: 100%;
    height: auto;
    opacity: 0;
    transition: all 1s ease;
}

.gallery img.showed {
    opacity: 1;
}

.gallery .buttons {
    display: flex;
    justify-content: space-between;
}

.gallery .btn {
    cursor: pointer;
}

.gallery .btn {
    padding: 15px 30px;
}

JavaScript

let btnPrev = document.querySelector('.btn-prev');
let btnNext = document.querySelector('.btn-next');

let images = document.querySelectorAll('.gallery .photos img');

let i = 0;

btnPrev.onclick = function () {
  images[i].className = '';
  i--;

  if (i < 0) {
    i = images.length - 1;
  }

  images[i].className = 'showed';
};

btnNext.onclick = function () {
  images[i].className = '';
  i++;

  if (i > images.length - 1) {
    i = 0;
  }

  images[i].className = 'showed';
};

function loopSlider(e) {
  let currentImage = i;

  let loopHandler = setInterval(function () {
    if (currentImage > images.length - 1) {
      currentImage = 0;
    } else if (currentImage < 0) {
      currentImage = images.length - 1;
    }

    for (let j = 0; j < images.length; j++) {
      images[j].className = '';
    }

    images[currentImage].className = 'showed';

    currentImage++;

  }, 1000);

  if (e.target.parentElement.classList.contains('active')) {
    clearInterval(loopHandler);
    
    e.target.parentElement.classList.remove('active');
  } else {
    
    e.target.parentElement.classList.add('active');
  }
}

for (let i = 0; i < images.length; i++) {
  images[i].onclick = loopSlider;
}