Хороший слайдер / карусель Swiperjs

Swiperjs - хороший адаптивный слайдер / карусель с множеством настроек и хорошими примерами.

Слайдер сразу понравиться по нескольким пунктам:

• Заработал без всякого шаманства.

• Добавляется, относительно, небольшой HTML вставкой.

• Предоставляет множеств настроек, среди которых есть редко встречающиеся. Например, позволяет делать вертикальный слайдеры.

• Хорошо адаптируется (растягивается / сжимается)

Ссылки на проект Swiper и github

Удобнее всего, на мой взгляд, будет ознакомиться со официальным списком демок.

Инструкция по использованию

Подключаем с CDN

 
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css" />
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />

<script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

Минимальный HTML

 
<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
  </div>
</div>

CSS

 
.swiper-container {
  width: 600px;
  height: 300px;
}

JS

 
const swiper = new Swiper('.swiper-container', {
  loop: true,
});

Подробнее можно посмотреть тут

Если этого мало, то добро пожаловать в раздел API

Также оставлю тут код с github от 19.07.2021