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

19.07.2021

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

pic1

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

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

  • Добавляется, относительно, небольшой 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


Категории: Web
Пометки: Слайдер, карусель, prettyphoto, slider ,Carousel
Яндекс.Метрика