В этом видео вы узнаете, как создать слайдер изображений (слайд-шоу/карусель) с автоматическим воспроизведением и ручной навигацией с использованием CSS, HTML и Javascript. Ручная навигация осуществляется с помощью кнопок, и вы можете перейти к любому слайду с помощью этих кнопок. Навигация автовоспроизведения автоматически меняет слайды благодаря таймеру, установленному с помощью javascript. Давайте посмотрим, как создать этот удивительный слайдер изображений.
Сначала создайте файл index.html и файл style.css. После того, как вы создали эти два файла, запустите HTML-часть ползунка изображения в файле index.html, как показано на видео. После того, как HTML-часть ползунка изображения будет завершена, свяжите файл style.css с файлом index.html между тегами <head></head>. Затем завершите стилизацию ползунка изображения, как показано в видео. После того, как вы закончите стилизацию ползунка изображения, вернитесь к файлу index.htm, чтобы закодировать javascript-часть перехода слайдера ползунка изображения. В файле index.html перед закрытием тега body откройте теги <script></script> и заполните javascript-часть функции интервала перехода слайдера изображения между этими тегами.
Все исходные коды и исходные файлы доступны для скачивания здесь. Используйте кнопку загрузки или скопируйте и вставьте код из текстовых редакторов. Мое мнение - сначала попробуйте сделать это, следуя видео построчно. Это поможет вам во всем разобраться. После этого, если ваш код неверен или не работает, используйте предоставленные исходные коды для сравнения с вашим кодом. Это поможет вам понять все свои ошибки.
HTML код
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Image Slider</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!--image slider start-->
<div class="slider">
<div class="slides">
<!--radio buttons start-->
<input type="radio" name="radio-btn" id="radio1">
<input type="radio" name="radio-btn" id="radio2">
<input type="radio" name="radio-btn" id="radio3">
<input type="radio" name="radio-btn" id="radio4">
<!--radio buttons end-->
<!--slide images start-->
<div class="slide first">
<img src="1.jpg" alt="">
</div>
<div class="slide">
<img src="2.jpg" alt="">
</div>
<div class="slide">
<img src="3.jpg" alt="">
</div>
<div class="slide">
<img src="4.jpg" alt="">
</div>
<!--slide images end-->
<!--automatic navigation start-->
<div class="navigation-auto">
<div class="auto-btn1"></div>
<div class="auto-btn2"></div>
<div class="auto-btn3"></div>
<div class="auto-btn4"></div>
</div>
<!--automatic navigation end-->
</div>
<!--manual navigation start-->
<div class="navigation-manual">
<label for="radio1" class="manual-btn"></label>
<label for="radio2" class="manual-btn"></label>
<label for="radio3" class="manual-btn"></label>
<label for="radio4" class="manual-btn"></label>
</div>
<!--manual navigation end-->
</div>
<!--image slider end-->
<script type="text/javascript">
var counter = 1;
setInterval(function(){
document.getElementById('radio' + counter).checked = true;
counter++;
if(counter > 4){
counter = 1;
}
}, 5000);
</script>
</body>
</html>
CSS стиль
body{
margin: 0;
padding: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #23E3C9;
}
.slider{
width: 800px;
height: 500px;
border-radius: 10px;
overflow: hidden;
}
.slides{
width: 500%;
height: 500px;
display: flex;
}
.slides input{
display: none;
}
.slide{
width: 20%;
transition: 2s;
}
.slide img{
width: 800px;
height: 500px;
}
/*css for manual slide navigation*/
.navigation-manual{
position: absolute;
width: 800px;
margin-top: -40px;
display: flex;
justify-content: center;
}
.manual-btn{
border: 2px solid #40D3DC;
padding: 5px;
border-radius: 10px;
cursor: pointer;
transition: 1s;
}
.manual-btn:not(:last-child){
margin-right: 40px;
}
.manual-btn:hover{
background: #40D3DC;
}
#radio1:checked ~ .first{
margin-left: 0;
}
#radio2:checked ~ .first{
margin-left: -20%;
}
#radio3:checked ~ .first{
margin-left: -40%;
}
#radio4:checked ~ .first{
margin-left: -60%;
}
/*css for automatic navigation*/
.navigation-auto{
position: absolute;
display: flex;
width: 800px;
justify-content: center;
margin-top: 460px;
}
.navigation-auto div{
border: 2px solid #40D3DC;
padding: 5px;
border-radius: 10px;
transition: 1s;
}
.navigation-auto div:not(:last-child){
margin-right: 40px;
}
#radio1:checked ~ .navigation-auto .auto-btn1{
background: #40D3DC;
}
#radio2:checked ~ .navigation-auto .auto-btn2{
background: #40D3DC;
}
#radio3:checked ~ .navigation-auto .auto-btn3{
background: #40D3DC;
}
#radio4:checked ~ .navigation-auto .auto-btn4{
background: #40D3DC;
}