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

Изучим простой способ создать слайдер на сайте с помощью html и css с примерами и пошаговым руководством.

Для создания слайдера в HTML и CSS понадобится написать некоторый код.

HTML

<div class="slider">
  <div class="slide">
      <img src="1.jpg">
  </div>
  <div class="slide">
      <img src="2.jpg">
  </div>
  <div class="slide">
      <img src="3.jpg">
  </div>
  <div class="slide">
      <img src="4.jpg">
  </div>
  <div class="slide">
      <img src="5.jpg">
  </div>
</div>

В этом коде мы создали блок <div>, который мы назвали slider. Затем мы добавили несколько блоков <div>, названных slide и добавили в них картинки. Эти блоки с картинками будут выступать в качестве слайдов.

CSS

.slider {
    width: 800px;
    height: 400px;
    overflow: hidden;
    position: relative;
}

.slide {
    float: left;
    position: relative;
    width: 800px;
    height: 400px;
    background-size: cover;
    background-position: center;
}

В этом коде мы задали ширину и высоту основному блоку slider. Затем мы задали ширину и высоту каждому блоку slide и сделали их выравнивание по левому краю. Также мы задали свойство background-size: cover, чтобы изображения масштабировались по размеру блока.

JavaScript

let currentSlide = 0;
let slides = document.querySelectorAll('.slide');
let totalSlides = slides.length;

function goToSlide(n) {
  slides[currentSlide].className = 'slide';
  currentSlide = (n+totalSlides)%totalSlides;
  slides[currentSlide].className = 'slide showing';
}

let next = document.getElementById('next');
let previous = document.getElementById('previous');

next.onclick = function() {
  goToSlide(currentSlide+1);
};

previous.onclick = function() {
  goToSlide(currentSlide-1);
};

В этом коде мы объявляем переменные currentSlide и slides, которые хранят информацию о текущем слайде и о всех слайдах соответственно. Затем мы объявляем функцию goToSlide(), которая позволяет переключаться между слайдами. Затем мы создаем переменные next и previous, которые ссылаются на элементы HTML с этими именами. Затем мы задаем действия на нажатие кнопок next и previous, чтобы переключать слайды.

Таким образом, мы можем создать слайдер с помощью HTML, CSS и JavaScript. Этот слайдер позволит переключаться между слайдами с помощью двух кнопок.