Image Slider - это тип веб-слайдера, который использует изображения для создания движения блоков, включая множество изображений, которые по очереди появляются на экране.
Обычно слайдер имеет несколько типичных функций, таких как:
- Автоматически переключать слайдер на другие изображения.
- Для перехода к следующему слайдеру имеется кнопка «Далее».
- Для просмотра предыдущего изображения предусмотрена кнопка «Назад».
Каждую отображаемую позицию изображения обозначают точки, и при нажатии изображение будет перемещено в соответствующую позицию.
HTML КОД:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Slider - With Auto-play & Manual Navigation Buttons</title>
<!-- Google Fonts -->
<link href='https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>
<!-- Style CSS -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="slider">
<div class="list">
<div class="item">
<img src="img/1.jpg" alt="">
</div>
<div class="item">
<img src="img/2.jpg" alt="">
</div>
<div class="item">
<img src="img/3.jpg" alt="">
</div>
<div class="item">
<img src="img/4.jpg" alt="">
</div>
<div class="item">
<img src="img/5.jpg" alt="">
</div>
</div>
<div class="buttons">
<button id="prev"><i class="fa fa-arrow-left" aria-hidden="true"></i></button>
<button id="next"><i class="fa fa-arrow-right" aria-hidden="true"></i></button>
</div>
<ul class="dots">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script src="app.js"></script>
</body>
</html>
CSS КОД:
.slider{
width: 1300px;
max-width: 100vw;
height: 700px;
margin: auto;
position: relative;
overflow: hidden;
border-radius: 20px;
}
.slider .list{
position: absolute;
width: max-content;
height: 100%;
left: 0;
top: 0;
display: flex;
transition: 1s;
}
.slider .list img{
width: 1300px;
max-width: 100vw;
height: 100%;
object-fit: cover;
}
.slider .buttons{
position: absolute;
top: 45%;
left: 5%;
width: 90%;
display: flex;
justify-content: space-between;
}
.slider .buttons button{
width: 50px;
height: 50px;
border-radius: 20%;
background-color: #fff5;
color: #fff;
border: none;
font-family: monospace;
font-weight: bold;
cursor: pointer;
}
.slider .buttons button:hover {
border: 3px solid #fff;
}
.slider .dots{
position: absolute;
bottom: 10px;
left: 0;
color: #fff;
width: 100%;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
}
.slider .dots li{
list-style: none;
width: 10px;
height: 10px;
background-color: #fff;
margin: 10px;
border-radius: 20px;
transition: 0.5s;
cursor: pointer;
}
.slider .dots li.active{
width: 30px;
}
@media screen and (max-width: 768px){
.slider{
height: 400px;
}
}
JAVASCRIPT КОД:
let slider = document.querySelector('.slider .list');
let items = document.querySelectorAll('.slider .list .item');
let next = document.getElementById('next');
let prev = document.getElementById('prev');
let dots = document.querySelectorAll('.slider .dots li');
let lengthItems = items.length - 1;
let active = 0;
next.onclick = function(){
active = active + 1 <= lengthItems ? active + 1 : 0;
reloadSlider();
}
prev.onclick = function(){
active = active - 1 >= 0 ? active - 1 : lengthItems;
reloadSlider();
}
let refreshInterval = setInterval(()=> {next.click()}, 5000);
function reloadSlider(){
slider.style.left = -items[active].offsetLeft + 'px';
//
let last_active_dot = document.querySelector('.slider .dots li.active');
last_active_dot.classList.remove('active');
dots[active].classList.add('active');
clearInterval(refreshInterval);
refreshInterval = setInterval(()=> {next.click()}, 5000);
}
dots.forEach((li, key) => {
li.addEventListener('click', ()=>{
active = key;
reloadSlider();
})
})
window.onresize = function(event) {
reloadSlider();
};
0 Комментарии