Модули: Parallax

Параметры Parallax

Параллакс-эффекты в Swiper поддерживают два типа элементов:

• Прямые дочерние элементы .swiper — эффект основан на общем прогрессе слайдера (подходит для фоновых изображений).
• Дочерние элементы .swiper-slide — эффект основан на прогрессе конкретного слайда.

Чтобы включить параллакс, инициализируйте Swiper с параметром parallax: true и добавьте нужные атрибуты к вёрстку слайдера:

• data-swiper-parallax — включает смещение по оси X и Y (в пикселях или процентах). Например, data-swiper-parallax="100" — элемент будет смещаться на ±100px; data-swiper-parallax="50%" — на ±50% от ширины или высоты элемента.
• data-swiper-parallax-x / data-swiper-parallax-y — отдельное управление по осям, количество пикселей или процент.
• data-swiper-parallax-scale — коэффициент масштаба неактивного элемента.
• data-swiper-parallax-opacity — прозрачность неактивного элемента.
• data-swiper-parallax-duration — индивидуальная длительность анимации (в мс).

<div class="swiper">
  <!-- Фоновый элемент Parallax -->
  <div
    class="parallax-bg"
    style="background-image:url(path/to/image.jpg)"
    data-swiper-parallax="-23%"
  ></div>
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <!-- Каждый слайд имеет parallax  заголовок -->
      <div class="title" data-swiper-parallax="-100">Joomla CMS</div>
      <!-- Подзаголовок -->
      <div class="subtitle" data-swiper-parallax="-200">Неплохая вещь для своих задач.</div>
      <!-- А тут текст с кастомным временем перехода ->
      <div
        class="text"
        data-swiper-parallax="-300"
        data-swiper-parallax-duration="600"
      >
        <p>У Лукоморья дуб зелёный, златая цепь на дубе том...</p>
      </div>
      <!-- Прозрачность parallax -->
      <div data-swiper-parallax-opacity="0.5">Я изменяю прозрачность параллакса</div>
      <!-- Масштаб parallax -->
      <div data-swiper-parallax-scale="0.15">Я изменю масштаб параллакса</div>
    </div>
    ...
  </div>
</div>