Как сделать слайдер на js

4 года назад

Человек-Молекула

Ответы

Для создания простого слайдера на JavaScript нам понадобится следующее:

HTML-разметка для слайдера, которая будет содержать контейнер для изображений и кнопки для переключения между ними. Допустим, у нас есть следующий код:

<div class="slider">
  <img src="img1.jpg" />
  <img src="img2.jpg" />
  <img src="img3.jpg" />
  <button class="prev">Назад</button>
  <button class="next">Вперед</button>
</div>

CSS-стили для слайдера, чтобы задать ему размеры, расположение и другие свойства. Например:

.slider {
  width: 500px;
  height: 300px;
  position: relative;
  overflow: hidden;
}

.slider img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.slider img.active {
  opacity: 1;
}

.slider button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}

.slider .prev {
  left: 10px;
}

.slider .next {
  right: 10px;
}

JavaScript-код для слайдера, который будет обрабатывать нажатия на кнопки и переключать изображения. Мы будем использовать массив для хранения изображений и переменную для хранения индекса текущего изображения:

const images = document.querySelectorAll('.slider img');
let currentIndex = 0;

function showImage(index) {
  images[currentIndex].classList.remove('active');
  images[index].classList.add('active');
  currentIndex = index;
}

document
  .querySelector('.slider.controlls')
  .addEventListener('click', function (event) {
    if (event.target.classList.contains('prev')) {
      let index = currentIndex - 1;
      if (index < 0) {
        index = images.length - 1;
      }
      showImage(index);
    } else if (event.target.classList.contains('next')) {
      let index = currentIndex + 1;
      if (index >= images.length) {
        index = 0;
      }
      showImage(index);
    }
  });

showImage(currentIndex);

Этот код добавляет обработчик событий на контейнер слайдера и при нажатии на кнопки "Назад" и "Вперед" вызывает функцию showImage, которая меняет классы активности на изображениях и обновляет значение переменной currentIndex.

3 года назад

Aleksey

10 месяцев·С нуля

Фронтенд-разработчик

Изучите HTML, CSS, JavaScript и React