Привет! 👋 Сегодня мы разберем, как создать простой, но функциональный слайдер изображений на чистом JavaScript. Мы не будем использовать сторонние библиотеки, чтобы ты мог глубже понять, как работает каждый элемент слайдера и как его можно улучшить.
Посмотреть на готовый слайдер можно здесь: https://coursme.github.io/02-slider-js/
Первым делом, нам нужно создать HTML-структуру для слайдера. Мы будем использовать элемент <div> для обёртки слайдов и несколько изображений, которые будут переключаться.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Image Slider</title>
<style>
.slider {
width: 500px;
height: 300px;
overflow: hidden;
position: relative;
}
.slides {
display: flex;
transition: transform 0.5s ease-in-out;
}
.slide {
min-width: 100%;
box-sizing: border-box;
}
img {
width: 100%;
height: 100%;
}
.controls {
position: absolute;
top: 50%;
width: 100%;
display: flex;
justify-content: space-between;
transform: translateY(-50%);
}
.control {
background-color: rgba(0, 0, 0, 0.5);
color: white;
border: none;
font-size: 18px;
cursor: pointer;
padding: 10px;
}
</style>
</head>
<body>
<h1>Слайдер изображений</h1>
<div class="slider">
<div class="slides">
<div class="slide"><img src="https://placehold.co/500x300?text=Slide+1" alt="Slide 1"></div>
<div class="slide"><img src="https://placehold.co/500x300?text=Slide+2" alt="Slide 2"></div>
<div class="slide"><img src="https://placehold.co/500x300?text=Slide+3" alt="Slide 3"></div>
<div class="controls">
<button class="control" id="prevBtn"><</button>
<button class="control" id="nextBtn">></button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
📋 Объяснение:
.slider: Обёртка для слайдов, которая задаёт фиксированные размеры и скрывает всё, что выходит за границы (overflow: hidden).
.slides: Контейнер для всех слайдов, который будет двигаться влево или вправо для смены изображений.
.slide: Каждый отдельный слайд. Мы задаём ему ширину в 100%, чтобы он занимал всю видимую область.
Кнопки управления: Это кнопки "вперёд" и "назад", которые будут переключать слайды.
Теперь переходим к основной логике — переключению слайдов при нажатии на кнопки. Нам нужно отслеживать текущий слайд и перемещать контейнер .slides с помощью CSS-свойства transform.
script.js:const slides = document.querySelector('.slides');
const slide = document.querySelectorAll('.slide');
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');
let currentIndex = 0;
const totalSlides = slide.length;
function updateSliderPosition() {
slides.style.transform = `translateX(-${currentIndex * 100}%)`;
}
nextBtn.addEventListener('click', () => {
if (currentIndex < totalSlides - 1) {
currentIndex++;
} else {
currentIndex = 0; // Возврат к первому слайду
}
updateSliderPosition();
});
prevBtn.addEventListener('click', () => {
if (currentIndex > 0) {
currentIndex--;
} else {
currentIndex = totalSlides - 1; // Переход на последний слайд
}
updateSliderPosition();
});
🔨 Как это работает:
translateX(): Мы используем это свойство для сдвига контейнера слайдов влево или вправо в зависимости от индекса текущего слайда.
Логика кнопок: Каждая кнопка увеличивает или уменьшает индекс слайда, после чего вызывается функция updateSliderPosition(), которая обновляет позицию контейнера.
Чтобы сделать наш слайдер более удобным, добавим функцию автопереключения слайдов через определённые промежутки времени. Это создаст эффект бесконечной галереи.
let autoSlideInterval = setInterval(() => {
if (currentIndex < totalSlides - 1) {
currentIndex++;
} else {
currentIndex = 0;
}
updateSliderPosition();
}, 3000); // Смена слайда каждые 3 секунды
// Остановка автопереключения при взаимодействии с кнопками
nextBtn.addEventListener('click', () => {
clearInterval(autoSlideInterval);
autoSlideInterval = setInterval(() => {
if (currentIndex < totalSlides - 1) {
currentIndex++;
} else {
currentIndex = 0;
}
updateSliderPosition();
}, 3000);
});
prevBtn.addEventListener('click', () => {
clearInterval(autoSlideInterval);
autoSlideInterval = setInterval(() => {
if (currentIndex < totalSlides - 1) {
currentIndex++;
} else {
currentIndex = 0;
}
updateSliderPosition();
}, 3000);
});
🕒 Описание:
Мы используем функцию setInterval(), чтобы каждые 3 секунды автоматически переключать слайд.
Взаимодействие с кнопками (вперёд/назад) приостанавливает автопереключение, но затем снова его запускает, чтобы слайдер продолжал работать автоматически.
Теперь твой слайдер полностью функционален! Ты можешь переключать слайды вручную с помощью кнопок или позволить слайдеру автоматически менять изображения каждые несколько секунд.
Создание слайдера на чистом JavaScript — это отличный способ попрактиковаться в манипуляциях с DOM и работе с CSS. Такой слайдер можно легко расширить, добавив, например, анимации, эффекты затухания или навигацию с помощью точек-индикаторов. 🚀
Если у тебя возникнут вопросы или ты захочешь добавить новые функции в слайдер, всегда рад помочь! 😄
Репозиторий с финальным кодом: https://github.com/Coursme/02-slider-js