JSFiddle - React, Tailwind, and code Playground

HTML

<p>какой-то текст какой-то текст какой-то текст какой-то текст какой-то текст какой-то текст какой-то текст какой-то текст какой-то текст какой-то текст </p>
<div class="container">
<div id="slides"> <div class="slide showing"><img alt=" " src="https://www.russieautrement.com/upload/medialibrary/8b0/tour-de-ville-1.jpg" title=" "> <div class = "img-name">Название картинки 5</div></div> <div class="slide"><img alt=" " src="https://www.russieautrement.com/upload/medialibrary/04b/tour-de-ville-2.jpg" title=" "><div class = "img-name">Название картинки 4</div></div><div class="slide"><img alt=" " src="https://www.russieautrement.com/upload/medialibrary/504/tour-de-ville-3.jpg" title=" "><div class = "img-name">Название картинки 3</div></div><div class="slide"><img alt=" " src="https://www.russieautrement.com/upload/medialibrary/d33/tour-de-ville-4.jpg" title=" "><div class = "img-name">Название картинки 2</div></div><div class="slide"><img alt=" " src="https://www.russieautrement.com/upload/medialibrary/120/tour-de-ville-5.jpg" title=" "><div class = "img-name">Название картинки 1</div></div></div>
	<div class="buttons">
 <button class="controls" id="previous">&lt;</button> <button class="controls" id="pause">❚❚</button> <button class="controls" id="next">&gt;</button>
	</div>
</div>

CSS

/*
essential styles:
these make the slideshow work
*/
#slides{

	padding: 0px;
	margin: 0px;
	list-style-type: none;
}

.slide{
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	opacity: 0;
	z-index: 1;

	-webkit-transition: opacity 1s;
	-moz-transition: opacity 1s;
	-o-transition: opacity 1s;
	transition: opacity 1s;
}

.showing{
	opacity: 1;
	z-index: 2;
}


.controls{
	display: none;
}


/*
non-essential styles:
just for appearance; change whatever you want
*/

.slide{
  position:absolute;
	font-size: 40px;
	box-sizing: border-box;

 
}
.slide img {
  display:block;
  width:100%;
  max-height:100%;
    object-fit: cover;
}



.controls{
  background: #333;
  color: #fff;
  border: none;
  padding: 5px 0px;
  font-size: 10px;
  cursor: pointer;
  border: 2px solid #fff;
  margin: 10px 10px 0px 10px;
  width: 30px;
opacity:0.3;
}

.controls:hover,
.controls:focus{
  background: #eee;
  color: #333;
}

.container{
  position: relative;
  height:440px;
}

.buttons{
  z-index: 10;
  font-size: 0px;
}

#previous{
  position:absolute;
  left: 0px;
  top:200px;
  z-index: 10; 
}
#next{
  position:absolute;
  right: 0;
  top:200px;
  z-index: 10; 
}
#pause{
   position:absolute;
  top:100%;
  right:50%;
 
  transform: translate(75%,-150%);
  z-index:10;
  /*display:none;*/
}


.jour-number{
font-size: 18px;
    line-height: 24px;
    color: #bf7800;
    font-weight: bold;
    margin-bottom: 6px;
}
.jour-name{
font-weight: bold;
    color: #000;
font-size: 18px;
    line-height: 24px;
    font-weight: bold;
}

@media screen and (max-width: 670px){
.container {
   
    height: 210px;
}

#pause {
top:0;
transform: translate(75%,0);
}
#previous {
top:0;
}
#next{
top:0;}

#dayheader-new {
    flex-direction: column;
    align-items: center;
}

.jour-name{
text-align:center;
}
}


.ankor-link {
    display: flex;
    margin: auto;
    width: 33%;
}

.ankor-link-item{
   text-align:center;
   background-color: #c73728;
}


.ankor-link-item > a{
    display: block;
   ...

JavaScript

var controls = document.querySelectorAll('.controls');
for(var i=0; i<controls.length; i++){
	controls[i].style.display = 'inline-block';
}

var slides = document.querySelectorAll('#slides .slide');
var currentSlide = 0;
var slideInterval = setInterval(nextSlide,4000);

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

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

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


var playing = true;
var pauseButton = document.getElementById('pause');

function pauseSlideshow(){
	pauseButton.innerHTML = '►'; // play character
	playing = false;
	clearInterval(slideInterval);
}

function playSlideshow(){
	pauseButton.innerHTML = '❚❚'; // pause character
	playing = true;
	slideInterval = setInterval(nextSlide,4000);
}

pauseButton.onclick = function(){
	if(playing){ pauseSlideshow(); }
	else{ playSlideshow(); }
};

var next = document.getElementById('next');
var previous = document.getElementById('previous');

next.onclick = function(){
	pauseSlideshow();
	nextSlide();
};
previous.onclick = function(){
	pauseSlideshow();
	previousSlide();
};