В этом сообщении блога я покажу вам, как создать адаптивный слайдер изображений, используя HTML, CSS и JavaScript. Для создания этого слайдера мы будем использовать стандартный JavaScript, не полагаясь на внешние библиотеки JavaScript, такие как SwiperJs или Owl Carousel. Таким образом, новички смогут узнать, как работают эти слайдеры изображений, и код, необходимый для их создания.
Слайдеры изображений стали важным компонентом веб-сайтов, используемым для привлекательной демонстрации нескольких изображений. Для начинающего веб-разработчика создание слайдера изображений может быть полезным проектом для понимания и улучшения ваших фундаментальных концепций веб-разработки, таких как адаптивный дизайн, манипулирование DOM и прослушиватели событий JavaScript.
В этом слайдере изображений есть две кнопки для перемещения изображений: одна для возврата назад и одна для перемещения вперед. Существует также горизонтальная полоса прокрутки, которая действует как индикатор ползунка и может использоваться для перемещения изображений путем ее перетаскивания. Этот слайдер поддерживает все основные браузеры, такие как Chrome, Firefox и Edge, а также мобильные устройства или планшеты.
Если вам нравится учиться с помощью видеоуроков, приведенное выше видео может стать отличным ресурсом. В видео я объяснил каждую строку кода и включил информативные комментарии, чтобы сделать процесс создания собственного слайдера изображений простым и понятным.
Однако, если вам нравится читать сообщения в блоге или вам нужно пошаговое руководство по этому проекту, вы можете продолжить чтение этого поста. К концу этой статьи у вас будет собственный слайдер изображений, который можно будет легко настроить и внедрить в другие ваши проекты.
Шаги по созданию слайдера изображений в HTML и JavaScript
Чтобы создать адаптивный слайдер изображений с использованием HTML, CSS и стандартного JavaScript, следуйте этим простым пошаговым инструкциям:
Сначала создайте папку с любым именем, которое вам нравится. Затем создайте внутри него необходимые файлы.
- Создайте файл index.html, который будет служить основным файлом.
- Создайте файл style.css для кода CSS.
- Создайте файл script.js для кода JavaScript.
Наконец, загрузите папку Images и поместите ее в каталог вашего проекта. Эта папка содержит все изображения, которые вам понадобятся для этого слайдера. Вы также можете использовать свои собственные изображения.
Для начала добавьте следующие HTML-коды в файл index.html. Эти коды включают в себя все основные семантические теги HTML, такие как div, button, img и т. д. для слайдера изображений.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset='utf-8'/>
<meta content='width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1' name='viewport'/>
<link href='https://monstertem.blogspot.com/favicon.ico' rel='icon' type='image/x-icon'/>
<title>Image Slider in HTML CSS and JavaScript | Monster Tem</title>
<!-- Google Fonts Link For Icons -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@48,400,0,0" />
<link href='https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>
<!--Stylesheets-->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<div class="slider-wrapper">
<button id="prev-slide" class="slide-button material-symbols-rounded">
chevron_left
</button>
<ul class="image-list">
<img class="image-item" src="img/1.jpg" alt="img-1" />
<img class="image-item" src="img/2.jpeg" alt="img-2" />
<img class="image-item" src="img/3.jpg" alt="img-3" />
<img class="image-item" src="img/4.jpg" alt="img-4" />
<img class="image-item" src="img/5.jpg" alt="img-5" />
<img class="image-item" src="img/6.jpg" alt="img-6" />
<img class="image-item" src="img/7.jpg" alt="img-7" />
<img class="image-item" src="img/8.jpg" alt="img-8" />
<img class="image-item" src="img/9.jpeg" alt="img-9" />
<img class="image-item" src="img/10.jpg" alt="img-10" />
</ul>
<button id="next-slide" class="slide-button material-symbols-rounded">
chevron_right
</button>
</div>
<div class="slider-scrollbar">
<div class="scrollbar-track">
<div class="scrollbar-thumb"></div>
</div>
</div>
</div>
<!--Script-->
<script src="js/script.js"></script>
</body>
</html>
Затем добавьте следующие коды CSS в файл style.css, чтобы сделать слайдер изображений красивым. Вы можете экспериментировать с различными свойствами CSS, такими как цвета, шрифты и фон, чтобы придать слайдеру индивидуальный вид. Если вы загрузите веб-страницу в браузере, вы увидите слайдер изображения с полосой прокрутки и кнопкой со стрелкой.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: #f1f4fd;
}
.container {
max-width: 1200px;
width: 95%;
}
.slider-wrapper {
position: relative;
}
.slider-wrapper .slide-button {
position: absolute;
top: 50%;
outline: none;
border: none;
height: 50px;
width: 50px;
z-index: 5;
color: #fff;
display: flex;
cursor: pointer;
font-size: 2.2rem;
background: #000;
align-items: center;
justify-content: center;
border-radius: 50%;
transform: translateY(-50%);
}
.slider-wrapper .slide-button:hover {
background: #404040;
}
.slider-wrapper .slide-button#prev-slide {
left: -25px;
display: none;
}
.slider-wrapper .slide-button#next-slide {
right: -25px;
}
.slider-wrapper .image-list {
display: grid;
grid-template-columns: repeat(10, 1fr);
gap: 18px;
font-size: 0;
list-style: none;
overflow-x: auto;
scrollbar-width: none;
}
.slider-wrapper .image-list::-webkit-scrollbar {
display: none;
}
.slider-wrapper .image-list .image-item {
width: 325px;
height: 400px;
margin-bottom: 30px;
object-fit: cover;
border-radius: 10px;
box-shadow: 0 2px 5px rgba(0,0,0,0.2), 0 4px 6px rgba(0,0,0,0.2);
}
.container .slider-scrollbar {
height: 24px;
width: 100%;
display: flex;
align-items: center;
}
.slider-scrollbar .scrollbar-track {
background: #ccc;
width: 100%;
height: 2px;
display: flex;
align-items: center;
border-radius: 4px;
position: relative;
}
.slider-scrollbar:hover .scrollbar-track {
height: 4px;
}
.slider-scrollbar .scrollbar-thumb {
position: absolute;
background: #000;
top: 0;
bottom: 0;
width: 50%;
height: 100%;
cursor: grab;
border-radius: inherit;
}
.slider-scrollbar .scrollbar-thumb:active {
cursor: grabbing;
height: 8px;
top: -2px;
}
.slider-scrollbar .scrollbar-thumb::after {
content: "";
position: absolute;
left: 0;
right: 0;
top: -10px;
bottom: -10px;
}
/* Styles for mobile and tablets */
@media only screen and (max-width: 1023px) {
.slider-wrapper .slide-button {
display: none !important;
}
.slider-wrapper .image-list {
gap: 10px;
margin-bottom: 15px;
scroll-snap-type: x mandatory;
}
.slider-wrapper .image-list .image-item {
width: 280px;
height: 380px;
}
.slider-scrollbar .scrollbar-thumb {
width: 20%;
}
}
Наконец, добавьте следующий код JavaScript в файл script.js, чтобы сделать слайдер изображений функциональным. Этот код включает в себя прослушиватели событий, таких как mouseup, mousemove, mousedown, click и математические вычисления, чтобы ползунок работал должным образом.
const initSlider = () => {
const imageList = document.querySelector(".slider-wrapper .image-list");
const slideButtons = document.querySelectorAll(".slider-wrapper .slide-button");
const sliderScrollbar = document.querySelector(".container .slider-scrollbar");
const scrollbarThumb = sliderScrollbar.querySelector(".scrollbar-thumb");
const maxScrollLeft = imageList.scrollWidth - imageList.clientWidth;
// Handle scrollbar thumb drag
scrollbarThumb.addEventListener("mousedown", (e) => {
const startX = e.clientX;
const thumbPosition = scrollbarThumb.offsetLeft;
const maxThumbPosition = sliderScrollbar.getBoundingClientRect().width - scrollbarThumb.offsetWidth;
// Update thumb position on mouse move
const handleMouseMove = (e) => {
const deltaX = e.clientX - startX;
const newThumbPosition = thumbPosition + deltaX;
// Ensure the scrollbar thumb stays within bounds
const boundedPosition = Math.max(0, Math.min(maxThumbPosition, newThumbPosition));
const scrollPosition = (boundedPosition / maxThumbPosition) * maxScrollLeft;
scrollbarThumb.style.left = `${boundedPosition}px`;
imageList.scrollLeft = scrollPosition;
}
// Remove event listeners on mouse up
const handleMouseUp = () => {
document.removeEventListener("mousemove", handleMouseMove);
document.removeEventListener("mouseup", handleMouseUp);
}
// Add event listeners for drag interaction
document.addEventListener("mousemove", handleMouseMove);
document.addEventListener("mouseup", handleMouseUp);
});
// Slide images according to the slide button clicks
slideButtons.forEach(button => {
button.addEventListener("click", () => {
const direction = button.id === "prev-slide" ? -1 : 1;
const scrollAmount = imageList.clientWidth * direction;
imageList.scrollBy({ left: scrollAmount, behavior: "smooth" });
});
});
// Show or hide slide buttons based on scroll position
const handleSlideButtons = () => {
slideButtons[0].style.display = imageList.scrollLeft <= 0 ? "none" : "flex";
slideButtons[1].style.display = imageList.scrollLeft >= maxScrollLeft ? "none" : "flex";
}
// Update scrollbar thumb position based on image scroll
const updateScrollThumbPosition = () => {
const scrollPosition = imageList.scrollLeft;
const thumbPosition = (scrollPosition / maxScrollLeft) * (sliderScrollbar.clientWidth - scrollbarThumb.offsetWidth);
scrollbarThumb.style.left = `${thumbPosition}px`;
}
// Call these two functions when image list scrolls
imageList.addEventListener("scroll", () => {
updateScrollThumbPosition();
handleSlideButtons();
});
}
window.addEventListener("resize", initSlider);
window.addEventListener("load", initSlider);
Чтобы лучше понять код JavaScript, я рекомендую посмотреть видеоурок выше, прочитать комментарии к коду и поэкспериментировать с ним.
Заключительные слова
В заключение, создание адаптивного слайдера изображений с нуля с использованием HTML, CSS и стандартного JavaScript — это не только ценный опыт обучения, но и практическое дополнение к вашим навыкам веб-разработки. Следуя инструкциям, описанным в этом посте, вы успешно создали функциональный слайдер изображений и теперь можете легко настроить его по своему выбору.
Не стесняйтесь экспериментировать с различными стилями, переходами и функциями, чтобы поднять слайдер изображений на новый уровень. Чтобы еще больше улучшить вашу веб-разработку, я рекомендую вам попробовать воссоздать другие интерактивные изображения или слайдеры карточек, доступные на этом веб-сайте.
Если у вас возникнут какие-либо проблемы при создании этого кода, вы можете скачать исходный код, нажав на кнопку скачать. Кроме того, оставляйте свои вопросы, предложения и отзывы в комментариях ниже.
0 Комментарии