JSFiddle - React, Tailwind, and code Playground

by Slava809

HTML

<div id="wrap">


  <div id="slider">
    <!-- вывод слайда на экран -->
    <div id="show">
      <img src="img/a.jpg" alt="" id="mainImg">
      <a href=""><img src="img/arrow_left.png" alt="" id="arrow_left"></a>
      <a href=""><img src="img/arrow_right.png" alt="" id="arrow_right"></a>
    </div>
    <!-- стрелки -->
    <div id="icon">
      <!-- маленькие иконки изобр -->
      <a href=""><img class="slide" data-n="1" src="img/a.jpg" alt=""></a>
      <a href=""><img class="slide" data-n="2" src="img/b.jpg" alt=""></a>
      <a href=""><img class="slide" data-n="3" src="img/c.jpg" alt=""></a>
      <a href=""><img class="slide" data-n="4" src="img/d.jpg" alt=""></a>
      <a href=""><img class="slide" data-n="5" src="img/e.jpg" alt=""></a>
    </div>
    <p id="btnPlay" class="btn_manag">Play</p>
    <p id="btnStop" class="btn_manag">Stop</p>
  </div>
</div>
<!-- 	<script>

	</script>
 -->
<script src='js/slider.js'></script>

CSS

body {
  padding-top: 20px;
  background: #e1d8b9;
}


/*обертка*/

#wrap {
  background: #3B6B91;
  width: 1020px;
  height: 550px;
  margin: 0 auto;
  padding: 20px 100px;
  border-radius: 5px;
}


/*показ картинки*/

#show {
  width: 640px;
  height: 400px;
  border-radius: 10px;
  background: lightgreen;
  border: 5px solid #eee;
  position: relative;
}

#mainImg {
  width: 640px;
  height: 400px;
}


/*стрелки*/

#arrow_left {
  top: 48%;
  left: 3%;
  position: absolute;
}

#arrow_right {
  top: 48%;
  right: 3%;
  position: absolute;
}


/*слайдер*/

#slider {
  position: relative;
  width: 640px;
  height: 500px;
  margin: 0 auto;
}

.slide {
  width: 100px;
  height: 60px;
  display: inline-block;
  border-radius: 4px;
  bottom: 10px;
  margin: 0 5px;
  border: 5px solid transparent;
  opacity: 0.6;
}

.slide:hover,
.slide:focus {
  opacity: 1;
  transition: border, opacity 300ms ease-out;
  border: 5px solid #eee;
}


/*маленькие иконки*/

#icon {
  padding: 10px 0;
  text-align: center;
  width: 640px;
  height: 80px;
}


/*переключатели*/

#slider p {
  display: inline-block;
  font: 20px Arial, Helvetica, sans-serif;
  color: #fff;
}

.active {
  opacity: 1;
}
 .btn_manag{
      cursor: pointer;
    }

JavaScript

// Слайдер

// добираюсь к элементам
var iconImg = document.getElementById('icon'),
  mainImg = document.getElementById('mainImg'),
  nextBtn = document.getElementById('arrow_right'),
  prevBtn = document.getElementById('arrow_left'),
  timer = '',
  playBtn = document.getElementById('btnPlay'),
  stopBtn = document.getElementById('btnStop');
btns = document.querySelectorAll('.slide'); // кнопки навигации
count = 1; // щетчик

imageNavigate();

// Навигация по картинкам
nextBtn.addEventListener('click', nextImage);
prevBtn.addEventListener('click', prevImage);

function nextImage(event) {
  event.preventDefault();

  if (count == 5) {
    count = 0;
  }

  count++;

  changeImage(count);
}

function prevImage(event) {
  event.preventDefault();

  if (count == 1) {
    count = 6;
  }

  count--;

  changeImage(count);
}

// обработчик
function changeImage(count) {
  for (var i = 0; i < btns.length; i++) {
    if (btns[i].getAttribute('data-n') == count) {
      mainImg.setAttribute('src', btns[i].getAttribute('src'));
    }
  }
}


// автоматическая навигация
function imageNavigate() {
  for (var i = 0; i < btns.length; i++) {
    btns[i].addEventListener('click', onImageClick);
  }
}


function onImageClick(event) {
  event.preventDefault();

  mainImg.setAttribute('src', event.target.getAttribute('src'));

  count = parseInt(event.target.getAttribute('data-n'));
}

// автоматическая навигация

playBtn.addEventListener('click', playSlider);
stopBtn.addEventListener('click', stopSlider);

var interval;
function playSlider(event) {
	interval = setInterval(changeSlider, 2000);
  //var interval = setInterval(changeSlider, 1000);
}

function stopSlider(event) {
	clearInterval(interval);
  //clearInterval(playSlider());
}

function changeSlider() {
  // var lastImg = btns[count].getAttribute('src');

  mainImg.setAttribute('src', btns[count].getAttribute('src'));
  count++;
  if (count == btns.length) {
    count = 0;
  }
}