JSFiddle - React, Tailwind, and code Playground

HTML

<div class="image">
  <img src="https://bipbap.ru/wp-content/uploads/2017/04/priroda_kartinki_foto_03.jpg" name="slide_show">
</div>


<div class="block">
  <div class="block__item block__item--active" data-image="https://bipbap.ru/wp-content/uploads/2017/04/priroda_kartinki_foto_03.jpg">первый итем </div>

  <div class="block__item" data-image="https://s.ill.in.ua/i/news/630x373/431/431521.jpg">второй итем </div>

  <div class="block__item" data-image="https://icocnews.ru/wp-content/uploads/2015/09/priroda.jpg">третий итем </div>

</div>

CSS

img {
  height: 300px;
}

.image {
  margin-bottom: 30px;
}

.block {
  display: flex;
  margin: 0 -40px;
  margin-bottom: 100px;
}

.block__item {
  margin: 0 40px;
 padding: 5px;
}

.block__item:hover {
  background: tomato;
  color: white;
}

.block__item--active {
  background: tomato;
  color: white;
}

JavaScript

var all_images = Array.from(document.querySelectorAll('.block__item')).map(el => el.dataset.image);
const img = document.querySelector('.image img')

var ImgNum = 0;
var ImgLength = all_images.length;
var delay = 2500;
var lock = false;
var run;

const items = [...document.querySelectorAll('.block__item')];

items.forEach(item => {
  item.onmouseover = () => {
    lock = true;
    img.src = item.dataset.image;
    changeActiveClass(item);
  }

  item.onmouseleave = () => {
    lock = false
  }
})
function changeActiveClass(activeItem){
	items.forEach(el => el.classList.remove('block__item--active'));
  activeItem.classList.add('block__item--active');
}
function chgImg(direction) {
  if (lock) return
  ImgNum = (ImgNum + direction) % ImgLength;
  img.src = all_images[ImgNum];
  changeActiveClass(items[ImgNum]);
}

run = setInterval(() => chgImg(1), delay);