Привет! 👋 Сегодня мы разберем, как создать простой, но функциональный слайдер изображений на чистом JavaScript. Мы не будем использовать сторонние библиотеки, чтобы ты мог глубже понять, как работает каждый элемент слайдера и как его можно улучшить.
Посмотреть на готовый слайдер можно здесь: https://coursme.github.io/02-slider-js/
Шаг 1. Подготовка HTML-структуры
Первым делом, нам нужно создать HTML-структуру для слайдера. Мы будем использовать элемент <div> для обёртки слайдов и несколько изображений, которые будут переключаться.
HTML-шаблон:
<!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%, чтобы он занимал всю видимую область.Кнопки управления: Это кнопки "вперёд" и "назад", которые будут переключать слайды.
Шаг 2. Добавление логики для переключения слайдов
Теперь переходим к основной логике — переключению слайдов при нажатии на кнопки. Нам нужно отслеживать текущий слайд и перемещать контейнер .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(), которая обновляет позицию контейнера.
Шаг 3. Добавление автопереключения слайдов
Чтобы сделать наш слайдер более удобным, добавим функцию автопереключения слайдов через определённые промежутки времени. Это создаст эффект бесконечной галереи.
Добавим автопереключение:
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 секунды автоматически переключать слайд.Взаимодействие с кнопками (вперёд/назад) приостанавливает автопереключение, но затем снова его запускает, чтобы слайдер продолжал работать автоматически.
Шаг 4. Завершение работы и тестирование
Теперь твой слайдер полностью функционален! Ты можешь переключать слайды вручную с помощью кнопок или позволить слайдеру автоматически менять изображения каждые несколько секунд.
Заключение
Создание слайдера на чистом JavaScript — это отличный способ попрактиковаться в манипуляциях с DOM и работе с CSS. Такой слайдер можно легко расширить, добавив, например, анимации, эффекты затухания или навигацию с помощью точек-индикаторов. 🚀
Если у тебя возникнут вопросы или ты захочешь добавить новые функции в слайдер, всегда рад помочь! 😄
Репозиторий с финальным кодом: https://github.com/Coursme/02-slider-js
Проходи практические уроки!
Получи сертификат!
21 окт. 2024
Что такое Docker и контейнеризация?
Узнайте, что такое Docker и контейнеризация, зачем это нужно, как работает и какие навыки нужны. Простые примеры и пошаговые инструкции для начинающих разработчиков.
18 нояб. 2024
Приложение с заметками на JavaScript
Пошаговое руководство по созданию приложения с заметками на JavaScript с использованием HTML и CSS. Урок включает работу с localStorage для хранения данных, а также подробное объяснение кода. В конце ссылка на GitHub с готовым проектом.
11 окт. 2024
Что такое API и как его использовать? Понятное руководство для новичков
Узнайте, что такое API, как оно работает и зачем его использовать. Пошаговое руководство для начинающих с примерами кода на JavaScript и созданием собственного API.
Не нашли нужной статьи?
Напишите нам и ее сделаем!
Проходи практические уроки!
Получи сертификат!