JSFiddle - React, Tailwind, and code Playground

by merindema

HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">	
	<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
	<link rel="stylesheet" href="js_style.css" />
	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
	<script src="lesson22.js"></script>
</head>
<body>
	<header id="header_id">
		<div class="container">
			<div class="row text_center">
				<div class="col-lg-12">
					<h2>Lesson 22 - Slider</h2><br>
					<input type="button" id="btn_slider_stop" class="buttons_slider" value="Остановить">
				</div>
			</div>
		</div>
	</header>
	<div id="slider">
		<div class="container">
			<div class="row justify-content-center">
				<div class="col-lg-8">
					<div class="slider_class">	
						<img class = 'img' src="https://images.wallpaperscraft.ru/image/single/lodka_machta_more_355988_1920x1080.jpg">
						<img class = 'img' src="https://images.wallpaperscraft.ru/image/single/koleso_obozreniia_voda_zdaniia_355968_1920x1080.jpg">
						<img class = 'img' src="https://images.wallpaperscraft.ru/image/single/vulkan_gora_sneg_353886_1920x1080.jpg">
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>

CSS

.text_center{
  text-align: center;
}
#slider img{
  width: 100%;
  height: 400px;
  display: none;
  border: 4px solid black;
  border-radius: 5px;

}
#header_id{
  margin-bottom: 20px;
}

#header_id h2{
  display: inline-block;
  border: 2px solid black;
  padding: 10px;
}
.buttons_slider{
  font-size: 18px;
  border: 2px solid black;
  padding: 3px 20px;
  background: space;
}
.buttons_slider:hover{
  background: pink;
  transition: .5s; 
}

JavaScript

// по загрузке страницы
window.onload = function () {
    // Получаю все свои картинки из html
    var images = document.querySelectorAll(".img"); 
    // Считаю сколько всего у меня картинок
    var img_dlina = images.length;

    var i = 0; // переменная i, для показа всех фоток по одной

    var slider = setInterval(function(){ 
        images.forEach( (images, i) => { // каждые 2 секунды установка
            images.style.display = 'none'; // стиля display none для всех
        });

        if(i == img_dlina) { // равно ли i длине картинок которые видемы
            i = 0; 
        }
      
        images[i].style.display = 'block'; // первая картинка видема
      
        i++;

    }, 2000); // каждые две секунды

    // остановка интервала
    var buttonStop = document.getElementById('btn_slider_stop');
    buttonStop.onclick = function() {
        clearInterval(slider);
    }
}