Библиотека Swiper для создания слайдеров (swiper js)

Расширенные примеры использования Swiper

Пример 1: Lazy loading изображений

Подгружает изображения только при приближении к текущему слайду. Используется модуль Lazy.

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <img data-src="https://picsum.photos/800/400?random=1" class="swiper-lazy" />
      <div class="swiper-lazy-preloader"></div>
    </div>
    <div class="swiper-slide">
      <img data-src="https://picsum.photos/800/400?random=2" class="swiper-lazy" />
    </div>
  </div>
</div>

<script>
  new Swiper('.swiper-container', {
    lazy: true,
  });
</script>

Результат: изображения загружаются только когда слайд становится видимым или приближается к нему.

Пример 2: Слайдер с параллакс-эффектом

Движение элементов внутри слайда с разной скоростью при перелистывании. Требует наличие data-атрибутов и включенного модуля Parallax.

<div class="swiper-container" data-parallax="-300">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <div class="slide-content" data-swiper-parallax="-400">Текст смещается на 400px</div>
      <img src="bg.jpg" data-swiper-parallax="-200" />
    </div>
  </div>
</div>

<script>
  new Swiper('.swiper-container', {
    parallax: true,
  });
</script>

Результат: при свайпе элементы движутся с разной скоростью, создавая глубину.

Пример 3: Вертикальный слайдер

Направление прокрутки задается параметром direction: 'vertical'. Полезен для полноэкранных секций.

new Swiper('.swiper-container', {
  direction: 'vertical',
  slidesPerView: 1,
  mousewheel: true, // листать колёсиком мыши
});

Результат: слайды сменяются по вертикали, как scroll-анимация.

Пример 4: Кастомная пагинация в виде прогресс-бара

Можно переопределить стандартную пагинацию кастомным элементом и обновлять его через событие slideChange.

<div class="swiper-container">
  <div class="swiper-wrapper">...</div>
  <div class="custom-progress"></div>
</div>

<style>
  .custom-progress {
    height: 4px;
    background: #e0e0e0;
    position: relative;
  }
  .custom-progress .bar {
    height: 100%;
    background: #007aff;
    width: 0%;
    transition: width 0.3s;
  }
</style>

<script>
  const swiper = new Swiper('.swiper-container', {
    on: {
      init() {
        const bar = document.createElement('div');
        bar.className = 'bar';
        document.querySelector('.custom-progress').appendChild(bar);
        this.updateProgress();
      },
      slideChange() {
        this.updateProgress();
      }
    },
    updateProgress() {
      const progress = (this.activeIndex + 1) / this.slides.length * 100;
      document.querySelector('.custom-progress .bar').style.width = progress + '%';
    }
  });
</script>

Результат: пагинация отображается как заполняющийся прогресс-бар.

Пример 5: Бесконечная карусель с loop и freemode

Режим freeMode: true позволяет прокручивать с инерцией, а loop: true зацикливает слайды.

new Swiper('.swiper-container', {
  loop: true,
  freeMode: true,
  slidesPerView: 'auto',
  centeredSlides: true,
  spaceBetween: 20,
});

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

Пример 6: Синхронизация с внешними кнопками

Методы swiper.slideNext() и swiper.slidePrev() можно привязать к любым элементам.

<button id="prev">Назад</button>
<button id="next">Вперёд</button>

<script>
  const swiper = new Swiper('.swiper-container', { ... });
  document.getElementById('prev').addEventListener('click', () => swiper.slidePrev());
  document.getElementById('next').addEventListener('click', () => swiper.slideNext());
</script>

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