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

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

10 февраля, 2023

145

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";
}

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

Чтобы сделать автоматический скрол в карусели, вы можете добавить функцию setInterval в JavaScript-код:

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;
}

Теперь при клике на точку в пагинации, слайд будет меняться, а также активная точка будет выделена. Вы можете использовать этот код как основу для вашей собственной кастомной карусели.