Слайдер на JS

Адаптивний слайдер-карусель на CSS та JS

До вашої уваги надається готовий код слайдера (каруселі) на 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">&#8249;</div>
    <div class="slider-arrow next">&#8250;</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();
});

Main Menu