Доброго времени суток! В данной статье я покажу Вам как сделать простейший слайдер на чистом JavaScript
Итак, код:
<!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>Простой слайдер изображений</title>
<style>
#slider-container {
display: flex;
align-items: center;
justify-content: space-between;
}
#image {
width: 500px;
height: 300px;
}
</style>
</head>
<body>
<div id="slider-container">
<button id="previous">Предыдущее</button>
<img id="image" src="images/image1.jpg" />
<button id="next">Следующее</button>
</div>
<script>
// Массив с URL изображений
const imagesUrls = [
"images/image1.jpg",
"images/image2.jpg",
"images/image3.jpg",
];
// индекс для отслеживания текущей картинки
let currentIndex = 0;
// Устанавливаем начальное изображение
const imageElement = document.querySelector("#image");
imageElement.src = imagesUrls[currentIndex];
// Функция, отвечающая за переход к следующему изображению
function nextImageHandler() {
// Увеличиваем индекс текущего изображения
currentIndex++;
// Если текущий индекс больше длины массива изображений, устанавливаем его обратно в 0
if (currentIndex >= imagesUrls.length) {
currentIndex = 0;
}
// Показываем следующее изображение
imageElement.src = imagesUrls[currentIndex];
}
// Функция, отвечающая за переход к предыдущему изображению
function previousImageHandler() {
// Уменьшаем индекс
currentIndex--;
// Если текущий индекс меньше 0, устанавливаем его на последний индекс массива изображений
if (currentIndex < 0) {
currentIndex = imagesUrls.length - 1;
}
// Показываем предыдущее изображение
imageElement.src = imagesUrls[currentIndex];
}
// Устанавливаем обработчики изображений на кнопки
const nextButton = document.querySelector("#next");
nextButton.addEventListener("click", nextImageHandler);
const previousButton = document.querySelector("#previous");
previousButton.addEventListener("click", previousImageHandler);
</script>
</body>
</html>
Таким образом, в примере выше представлен простейший слайдер, который можно стилизовать так, как требуется в
конкретном случае.