Головна сторінка » Статті » Своя карусель без підключень до бібліотек

Своя карусель без підключень до бібліотек

10 Лютого, 2023

137

HTML код для каруселі:

<div class="carousel">
  <div class="carousel-container">
    <img src="img1.jpg" alt="Image 1">
    <img src="img2.jpg" alt="Image 2">
    <img src="img3.jpg" alt="Image 3">
    <!-- Add as many images as you want -->
  </div>
  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
  <a class="next" onclick="plusSlides(1)">&#10095;</a>
</div>

CSS код для каруселі:

.carousel {
  position: relative;
  width: 100%;
}

.carousel-container {
  display: flex;
}

.carousel-container img {
  width: 100%;
  object-fit: cover;
  object-position: center;
}

.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

JavaScript код для каруселі:

let slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides((slideIndex += n));
}

function showSlides(n) {
  let i;
  const slides = document.getElementsByClassName("carousel-container")[0].children;
  if (n > slides.length) {
    slideIndex = 1;
  }
  if (n < 1) {
    slideIndex = slides.length;
  }
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  slides[slideIndex - 1].style.display = "block";
}

Автоматичний скрол для каруселі

Щоб зробити автоматичний скрол в каруселі, ви можете додати функцію setIntervalJavaScript-код:

let slideIndex = 1;
showSlides(slideIndex);
setInterval(() => {
  showSlides((slideIndex += 1));
}, 3000); // Change the interval time here to adjust the speed

function plusSlides(n) {
  showSlides((slideIndex += n));
}

function showSlides(n) {
  let i;
  const slides = document.getElementsByClassName("carousel-container")[0].children;
  if (n > slides.length) {
    slideIndex = 1;
  }
  if (n < 1) {
    slideIndex = slides.length;
  }
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  slides[slideIndex - 1].style.display = "block";
}

У цьому коді setIntervalвстановлює інтервал в 3000 мілісекунд (3 секунди), і кожен інтервал викликається функція showSlidesз аргументом (slideIndex + 1), що призводить до перегортання кожні 3 секунди. Щоб змінити швидкість автоматичного скролла, змініть значення інтервалу в мілісекундах.

Виводимо 3 картинки на слайд

Тут можна або поміняти HTML розмітку і підкоригувати CSS:

Щоб зробити 3 картинки на слайді, ви можете змінити HTML-розмітку, додаючи кожну картинку в окремий елемент <div>:

<!-- HTML code -->
<div class="carousel-container">
  <div class="carousel-slide">
    <img src="image1.jpg" alt="Image 1">
    <img src="image2.jpg" alt="Image 2">
    <img src="image3.jpg" alt="Image 3">
  </div>
  <div class="carousel-slide">
    <img src="image4.jpg" alt="Image 4">
    <img src="image5.jpg" alt="Image 5">
    <img src="image6.jpg" alt="Image 6">
  </div>
  <!-- Add or remove elements here -->
</div>

Також вам потрібно буде змінити стилі CSS, щоб кожна картинка відображалася в рядок:

/* CSS code */
.carousel-slide {
  display: flex;
  flex-wrap: wrap;
}

.carousel-slide img {
  width: calc(100% / 3);
  height: auto;
}

Або трохи дописати JS:

Ви можете додати або видалити елементи з зображеннями в JavaScript за допомогою createElement()функцій appendChild()і removeChild():

// JavaScript code
const carouselContainer = document.querySelector(".carousel-container");
const carouselSlide = document.querySelector(".carousel-slide");

function changeNumberOfImages(newNumberOfImages) {
  // Remove the existing images
  while (carouselSlide.firstChild) {
    carouselSlide.removeChild(carouselSlide.firstChild);
  }

  // Add new images
  for (let i = 0; i < newNumberOfImages; i++) {
    const image = document.createElement("img");
    image.src = "image" + (i + 1) + ".jpg";
    image.alt = "Image " + (i + 1);
    carouselSlide.appendChild(image);
  }
}

changeNumberOfImages(3); // Display 3 images on each slide

Зверніть увагу, що у наведеному коді використовується фіксоване ім’я файлу зображення для прикладу. Ви можете використовувати будь-які імена файлів або завантажувати зображення динамічно, наприклад, за допомогою AJAX.

Виводь пагінацію для каруселі:

Для виведення пагінації ви можете додати кілька кнопок та використовувати JavaScript для відстеження їх натискання та зміни слайду:

// JavaScript code
const carouselContainer = document.querySelector(".carousel-container");
const carouselSlide = document.querySelector(".carousel-slide");
const prevBtn = document.querySelector(".prev-btn");
const nextBtn = document.querySelector(".next-btn");
const pagination = document.querySelector(".pagination");

let index = 0;
let slides = carouselSlide.children;
let dots = [];

for (let i = 0; i < slides.length; i++) {
  const dot = document.createElement("span");
  dot.classList.add("dot");
  pagination.appendChild(dot);
  dots.push(dot);
}

dots[index].classList.add("active");

prevBtn.addEventListener("click", function() {
  goToSlide(index - 1);
});

nextBtn.addEventListener("click", function() {
  goToSlide(index + 1);
});

for (let i = 0; i < dots.length; i++) {
  dots[i].addEventListener("click", function() {
    goToSlide(i);
  });
}

function goToSlide(n) {
  slides[index].classList.remove("active");
  dots[index].classList.remove("active");
  index = (n + slides.length) % slides.length;
  slides[index].classList.add("active");
  dots[index].classList.add("active");
}

HTML-розмітка для пагінації може виглядати так:

<!-- HTML code -->
<div class="pagination">
</div>

У цьому прикладі кожна точка є елементом span, яке клас activeпоказує, що слайд активний. Ви можете змінювати зовнішній вигляд та стилі пагінації, використовуючи CSS.

/* CSS code */
.pagination {
  display: flex;
  justify-content: center;
  padding: 10px 0;
}

.dot {
  height: 10px;
  width: 10px;
  margin: 0 10px;
  border-radius: 50%;
  display: inline-block;
  background-color: gray;
  transition: background-color 0.2s ease-in-out;
}

.dot.active {
  background-color: black;
}

Тепер при натисканні на точку в пагінації, слайд буде змінюватися, а також активна точка буде виділена. Ви можете використовувати цей код як основу для власної кастомної каруселі.