Возможно, вы видели функцию скольжения изображений на различных популярных платформах социальных сетей. Где пользователь может перемещать изображение вправо или влево. Знаете ли вы, что слайдеры изображений такого типа можно создавать с помощью HTML CSS и JavaScrip без использования каких-либо плагинов?
Сегодня в этом блоге вы узнаете, как создать слайдер изображений с помощью HTML CSS и JavaScript. Создание слайдера изображений — отличный способ улучшить свои навыки кодирования в HTML, CSS и JavaScript.
Пример:
Создание слайдера изображений представляет собой практический проект, который позволяет вам практиковаться в использовании различных методов и концепций в реальном сценарии.
Чтобы создать слайдер в HTML, CSS и JavaScript, выполните указанные шаги:
Создайте папку. Вы можете поместить любое имя в эту папку и создать в ней указанные ниже файлы.
- Создайте файл index.html . Имя файла должно быть index и его расширение .html.
- Создайте файл style.css . Имя файла должно быть стилем, а его расширение — .css.
- Создайте файл script.js . Имя файла должно быть script и его расширение .js.
Добавьте в head
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" />
HTML КОД:
<div class="wrapper-slider">
<i class="fa-solid fa-arrow-left button" id="prev"></i>
<div class="image-container">
<div class="carousel">
<img src="images/image1.jpg" alt="" />
<img src="images/image2.jpg" alt="" />
<img src="images/image3.jpg" alt="" />
<img src="images/image4.jpg" alt="" />
</div>
<i class="fa-solid fa-arrow-right button" id="next"></i>
</div>
</div>
CSS КОД:
.wrapper-slider {
display: flex;
max-width: 650px;
width: 100%;
height: 400px;
background: #fff;
align-items: center;
justify-content: center;
position: relative;
border-radius: 12px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
.wrapper-slider i.button {
position: absolute;
top: 50%;
transform: translateY(-50%);
height: 36px;
width: 36px;
background-color: #343f4f;
border-radius: 50%;
text-align: center;
line-height: 36px;
color: #fff;
font-size: 15px;
transition: all 0.3s linear;
z-index: 100;
cursor: pointer;
}
i.button:active {
transform: scale(0.94) translateY(-50%);
}
i#prev {
left: 25px;
}
i#next {
right: 25px;
}
.image-container {
height: 320px;
max-width: 500px;
width: 100%;
overflow: hidden;
}
.image-container .carousel {
display: flex;
height: 100%;
width: 100%;
transition: all 0.4s ease;
}
.carousel img {
height: 100%;
width: 100%;
border-radius: 18px;
border: 10px solid #fff;
object-fit: cover;
}
JAVASCRIPT КОД:
// Get the DOM elements for the image carousel
const wrapper = document.querySelector(".wrapper"),
carousel = document.querySelector(".carousel"),
images = document.querySelectorAll("img"),
buttons = document.querySelectorAll(".button");
let imageIndex = 1,
intervalId;
// Define function to start automatic image slider
const autoSlide = () => {
// Start the slideshow by calling slideImage() every 2 seconds
intervalId = setInterval(() => slideImage(++imageIndex), 2000);
};
// Call autoSlide function on page load
autoSlide();
// A function that updates the carousel display to show the specified image
const slideImage = () => {
// Calculate the updated image index
imageIndex = imageIndex === images.length ? 0 : imageIndex < 0 ? images.length - 1 : imageIndex;
// Update the carousel display to show the specified image
carousel.style.transform = `translate(-${imageIndex * 100}%)`;
};
// A function that updates the carousel display to show the next or previous image
const updateClick = (e) => {
// Stop the automatic slideshow
clearInterval(intervalId);
// Calculate the updated image index based on the button clicked
imageIndex += e.target.id === "next" ? 1 : -1;
slideImage(imageIndex);
// Restart the automatic slideshow
autoSlide();
};
// Add event listeners to the navigation buttons
buttons.forEach((button) => button.addEventListener("click", updateClick));
// Add mouseover event listener to wrapper element to stop auto sliding
wrapper.addEventListener("mouseover", () => clearInterval(intervalId));
// Add mouseleave event listener to wrapper element to start auto sliding again
wrapper.addEventListener("mouseleave", autoSlide);
Вот и все, теперь вы успешно создали проект на Image Slider. Если ваш код не работает или вы столкнулись с какими-либо проблемами, загрузите файлы исходного кода с помощью данной кнопки загрузки. Это бесплатно, и будет загружен zip-файл, содержащий папку проекта с файлами исходного кода.