До вашої уваги надається готовий код слайдера (каруселі) на Javascript та CSS.
Перший приклад коду - це скоріше карусель, ніж слайдер, тому що в коді не передбачені кнопки для прогортання слайдів. Перехід до наступного слайду відбувається автоматично.
Другий приклад коду містить кнопки "Вперед" та "Назад" для прогортання слайдів. Тому у випадку з цим варіантом можна сказати, що це код слайдера.
Код каруселі на JS
Суть каруселі полягає в тому, що перехід до наступного слайду відбувається автоматично. Часовий інтервал для переходу до наступного слайду вказується у коді JavaScript.
Код CSS
.slider {
width: 100%; /* ширина блоку зі слайдами */
height: 400px;
overflow: hidden;
position: relative;
}
.slider-inner {
display: flex;
height: 100%;
transition: transform 0.5s;
}
.slide {
flex: 0 0 20%; /* Змінено на 20% щоб відображати 5 слайдів на екрані */
height: 100%;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
}
/* Стилі для сладів */
.slide:nth-child(1) { background-color: #ff7f50; }
.slide:nth-child(2) { background-color: #6495ed; }
.slide:nth-child(3) { background-color: #ffa500; }
.slide:nth-child(4) { background-color: #00ffff; }
.slide:nth-child(5) { background-color: #008000; }
.slide:nth-child(6) { background-color: #ff7f50; }
.slide:nth-child(7) { background-color: #6495ed; }
.slide:nth-child(8) { background-color: #ffa500; }
.slide:nth-child(9) { background-color: #00ffff; }
.slide:nth-child(10) { background-color: #008000; }
/* Адаптивні стили */
/* Стилі для екранів з шириною менше або рівною 1024px */
@media (max-width: 1024px) {
.slide {
font-size: 18px;
flex: 0 0 25%; /* Змінено на 25% для відображення 4 слайдів в ряд */
}
}
/* Стилі для екранів з шириною менше або рівною 768px */
@media (max-width: 768px) {
.slide {
font-size: 18px;
flex: 0 0 50%; /* Змінено на 50% для відображення 2 слайдів в ряд */
}
}
/* Стилі для екранів з шириною менше або рівною 480px */
@media (max-width: 480px) {
.slide {
font-size: 18px;
flex: 0 0 100%; /* Змінено на 100% для відображення одного слайду в ряд */
}
}
Код HTML
<div class="slider">
<div class="slider-inner">
<div class="slide">Slide 1</div>
<div class="slide">Slide 2</div>
<div class="slide">Slide 3</div>
<div class="slide">Slide 4</div>
<div class="slide">Slide 5</div>
<div class="slide">Slide 6</div>
<div class="slide">Slide 7</div>
<div class="slide">Slide 8</div>
<div class="slide">Slide 9</div>
<div class="slide">Slide 10</div>
</div>
</div>
Код JS
var slideIndex = 0;
var slides = document.getElementsByClassName("slide");
function showSlides() {
for (var i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (var j = 0; j < 5; j++) {
var index = (slideIndex + j) % slides.length;
slides[index].style.display = "flex";
slides[index].style.order = j + 1;
}
slideIndex++;
if (slideIndex >= slides.length) {
slideIndex = 0;
}
setTimeout(showSlides, 2000); // Змінюємо слайд кожні 2 секунди
}
showSlides();
Якщо потрібно, щоб при наведенні курсора миші на слайдер, автоматичне перегортання зупинялося, використовуйте JS код вказаний нижче.
Призупинення автоматичного перегортання
var slideIndex = 0;
var slides = document.getElementsByClassName("slide");
var sliderContainer = document.querySelector(".slider");
var slideInterval;
function showSlides() {
for (var i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (var j = 0; j < 5; j++) {
var index = (slideIndex + j) % slides.length;
slides[index].style.display = "flex";
slides[index].style.order = j + 1;
}
slideIndex++;
if (slideIndex >= slides.length) {
slideIndex = 0;
}
}
function startSlideShow() {
slideInterval = setInterval(showSlides, 2000); // Змінюємо слайд кожні 2 секунди
}
function stopSlideShow() {
clearInterval(slideInterval); // Зупиняємо перехід до іншого слайду
}
startSlideShow();
sliderContainer.addEventListener("mouseover", function () {
stopSlideShow();
});
sliderContainer.addEventListener("mouseout", function () {
startSlideShow();
});
Код слайдера на JS
Якщо вам потрібно додати стрілки для прогортання слайдів вперед і назад, а також навігаційні кнопки для швидкого переходу до потрібного слайду то приклад коду написаний нижче.
Код CSS
.slider {
width: 100%; /* ширина блоку зі слайдами */
height: 400px;
overflow: hidden;
position: relative;
}
.slider-inner {
display: flex;
height: 100%;
transition: transform 0.5s;
}
.slide {
flex: 0 0 20%; /* Змінено на 20% щоб відображати 5 слайдів на екрані */
height: 100%;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
}
/* Стилі для сладів */
.slide:nth-child(1) { background-color: #ff7f50; }
.slide:nth-child(2) { background-color: #6495ed; }
.slide:nth-child(3) { background-color: #ffa500; }
.slide:nth-child(4) { background-color: #00ffff; }
.slide:nth-child(5) { background-color: #008000; }
.slide:nth-child(6) { background-color: #ff7f50; }
.slide:nth-child(7) { background-color: #6495ed; }
.slide:nth-child(8) { background-color: #ffa500; }
.slide:nth-child(9) { background-color: #00ffff; }
.slide:nth-child(10) { background-color: #008000; }
/* Адаптивні стили */
/* Стилі для екранів з шириною менше або рівною 1024px */
@media (max-width: 1024px) {
.slide {
font-size: 18px;
flex: 0 0 25%; /* Змінено на 25% для відображення 4 слайдів в ряд */
}
}
/* Стилі для екранів з шириною менше або рівною 768px */
@media (max-width: 768px) {
.slide {
font-size: 18px;
flex: 0 0 50%; /* Змінено на 50% для відображення 2 слайдів в ряд */
}
}
/* Стилі для екранів з шириною менше або рівною 480px */
@media (max-width: 480px) {
.slide {
font-size: 18px;
flex: 0 0 100%; /* Змінено на 100% для відображення одного слайду в ряд */
}
}
/* Стилі для кнопок навігації */
.slider-nav {
display: flex;
justify-content: center;
margin-top: 10px;
}
.slider-nav-button {
margin: 0 5px;
padding: 5px 10px;
background-color: #000;
color: #fff;
border: none;
cursor: pointer;
}
.slider-nav-button.active {
background-color: #333;
}
/* Стили для стрілок */
.slider-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 40px;
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
font-size: 24px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background-color 0.3s;
}
.slider-arrow:hover {
background-color: rgba(0, 0, 0, 0.8);
}
.slider-arrow.prev {
left: 10px;
}
.slider-arrow.next {
right: 10px;
}
Код HTML
<div class="slider">
<div class="slider-inner">
<div class="slide">Slide 1</div>
<div class="slide">Slide 2</div>
<div class="slide">Slide 3</div>
<div class="slide">Slide 4</div>
<div class="slide">Slide 5</div>
<div class="slide">Slide 6</div>
<div class="slide">Slide 7</div>
<div class="slide">Slide 8</div>
<div class="slide">Slide 9</div>
<div class="slide">Slide 10</div>
<div class="slider-arrow prev">‹</div>
<div class="slider-arrow next">›</div>
</div>
</div>
<div class="slider-nav">
</div>
Код JavaScript
var slideIndex = 0;
var slides = document.getElementsByClassName("slide");
var sliderContainer = document.querySelector(".slider");
var slideInterval;
var prevArrow = document.querySelector(".slider-arrow.prev");
var nextArrow = document.querySelector(".slider-arrow.next");
var sliderNav = document.querySelector(".slider-nav");
function showSlides() {
for (var i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
var startIndex = slideIndex;
var endIndex = (slideIndex + 4) % slides.length;
for (var j = 0; j < 5; j++) {
var index = (startIndex + j) % slides.length;
slides[index].style.display = "flex";
slides[index].style.order = j + 1;
}
}
function startSlideShow() {
slideInterval = setInterval(function() {
slideIndex++;
if (slideIndex >= slides.length) {
slideIndex = 0;
}
showSlides();
}, 2000); // Змінюємо слайд кожні 2 секунди
}
function stopSlideShow() {
clearInterval(slideInterval); // Зупиняємо перехід до іншого слайду
}
function goToNextSlide() {
slideIndex++;
if (slideIndex >= slides.length) {
slideIndex = 0;
}
showSlides();
}
function goToPrevSlide() {
slideIndex--;
if (slideIndex < 0) {
slideIndex = slides.length - 1;
}
showSlides();
}
function goToSlide(index) {
slideIndex = index;
showSlides();
}
prevArrow.addEventListener("click", goToPrevSlide);
nextArrow.addEventListener("click", goToNextSlide);
function createSliderNavButtons() {
for (var i = 0; i < slides.length; i++) {
var button = document.createElement("button");
button.classList.add("slider-nav-button");
button.textContent = i + 1;
button.addEventListener("click", function(event) {
var buttonIndex = parseInt(event.target.textContent) - 1;
goToSlide(buttonIndex);
});
sliderNav.appendChild(button);
}
}
createSliderNavButtons();
showSlides();
startSlideShow();
sliderContainer.addEventListener("mouseover", function () {
stopSlideShow();
});
sliderContainer.addEventListener("mouseout", function () {
startSlideShow();
});