Параметры Swiper — настройка слайдера для сайта JS / jQuery

Параметры Swiper — настройка слайдера для сайта JS / jQuery. Описание свойств и функций Swiper (свипер)

Swiper Полный HTML-макет слайдера на сайт

<!-- Slider main container -->
<div class="swiper-container">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        ...
    </div>
    <!-- If we need pagination -->
    <div class="swiper-pagination"></div>

    <!-- If we need navigation buttons -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

    <!-- If we need scrollbar -->
    <div class="swiper-scrollbar"></div>
</div>

Инициализировать Swiper

Теперь, когда у нас есть HTML-код Swiper, нам нужно инициализировать его, используя следующую функцию:

Например:

var mySwiper = new Swiper('.swiper-container', {
    speed: 400,
    spaceBetween: 100
});

После инициализации Swiper можно получить доступ к экземпляру Swiper на свой HTMLElement. Это swiperсвойство элемента контейнера HTML Swiper:

var mySwiper = document.querySelector('.swiper-container').swiper

// Now you can use all slider methods like
mySwiper.slideNext();

Параметры Swiper

Давайте посмотрим на список всех доступных параметров:

var swiper = new Swiper('.swiper-container', {
  // Default parameters
  slidesPerView: 4,
  spaceBetween: 40,
  // Responsive breakpoints
  breakpoints: {
    // when window width is <= 320px
    320: {
      slidesPerView: 1,
      spaceBetween: 10
    },
    // when window width is <= 480px
    480: {
      slidesPerView: 2,
      spaceBetween: 20
    },
    // when window width is <= 640px
    640: {
      slidesPerView: 3,
      spaceBetween: 30
    }
  }
})

var swiper = new Swiper('.swiper-container', {
  // Default parameters for smallest screen
  slidesPerView: 1,
  spaceBetween: 10,
  // Responsive breakpoints
  breakpointsInverse: true,
  breakpoints: {
    // when window width is >= 320px
    320: {
      slidesPerView: 2,
      spaceBetween: 20
    },
    // when window width is >= 480px
    480: {
      slidesPerView: 3,
      spaceBetween: 30
    },
    // when window width is >= 640px
    640: {
      slidesPerView: 4,
      spaceBetween: 40
    }
  }
})

Методы ползунка и свойства

После инициализации Slider у нас есть свой инициализированный экземпляр в переменной (аналогично mySwiperпеременной в примере выше) с полезными методами и свойствами:

mySwiper.appendSlide('<div class="swiper-slide">Slide 10"</div>')
mySwiper.appendSlide([
   '<div class="swiper-slide">Slide 10"</div>',
   '<div class="swiper-slide">Slide 11"</div>'
]);

mySwiper.prependSlide('<div class="swiper-slide">Slide 0"</div>')
mySwiper.prependSlide([
   '<div class="swiper-slide">Slide 1"</div>',
   '<div class="swiper-slide">Slide 2"</div>'
]);

mySwiper.addSlide(1, '<div class="swiper-slide">Slide 10"</div>')
mySwiper.addSlide(1, [
   '<div class="swiper-slide">Slide 10"</div>',
   '<div class="swiper-slide">Slide 11"</div>'
]);

mySwiper.removeSlide(0); //remove first slide
mySwiper.removeSlide([0, 1]); //remove first and second slides

События

Swiper поставляется с кучей полезных событий, которые вы можете слушать. События могут быть назначены двумя способами:

1. Использование onпараметра для инициализации swiper:

   var mySwiper = new Swiper('.swiper-container', {
     // ...
     on: {
       init: function () {
         console.log('swiper initialized');
       },
     },
   };

2. Использование onметода после инициализации swiper.

   var mySwiper = new Swiper('.swiper-container', {
     // ...
   };
   mySwiper.on('slideChange', function () {
     console.log('slide changed');
   });

var swiper = new Swiper('.swiper-container', {
  init: false,
  // other parameters
})
swiper.on('init', function() { /* do something */ });
// init Swiper
swiper.init();

var swiper = new Swiper('.swiper-container', {
  // other parameters
  on: {
    init: function () {
      /* do something */
    },
  }
});

Компоненты

навигация

Параметры навигации

var mySwiper = new Swiper('.swiper-container', {
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});

Методы и свойства навигации

пагинация

Параметры разбивки на страницы

var mySwiper = new Swiper('.swiper-container', {
  pagination: {
    el: '.swiper-pagination',
    type: 'bullets',
  },
});

var swiper = new Swiper('.swiper-container', {
  //...
  renderBullet: function (index, className) {
    return '<span class="' + className + '">' + (index + 1) + '</span>';
  }
});

var swiper = new Swiper('.swiper-container', {
  //...
  renderFraction: function (currentClass, totalClass) {
      return '<span class="' + currentClass + '"></span>' +
             ' of ' +
             '<span class="' + totalClass + '"></span>';
  }
});

var swiper = new Swiper('.swiper-container', {
  //...
  renderProgressbar: function (progressbarFillClass) {
      return '<span class="' + progressbarFillClass + '"></span>';
  }
});

var swiper = new Swiper('.swiper-container', {
  //...
  renderCustom: function (swiper, current, total) {
      return current + ' of ' + total;
  }
});

Методы и свойства разбиения на страницы

События разбиения на страницы

Полоса прокрутки

Параметры прокрутки

var mySwiper = new Swiper('.swiper-container', {
  scrollbar: {
    el: '.swiper-scrollbar',
    draggable: true,
  },
});

Методы и свойства прокрутки

Автовоспроизведение

Параметры автовоспроизведения

var mySwiper = new Swiper('.swiper-container', {
  autoplay: {
    delay: 5000,
  },
});

<!-- hold this slide for 2 seconds -->
<div class="swiper-slide" data-swiper-autoplay="2000">

Способы и свойства автовоспроизведения

События автовоспроизведения

параллакс

Swiper поддерживает эффекты перехода параллакса для вложенных элементов swiper / slides. Поддерживаются два типа элементов параллакса:

• Прямые дочерние элементы swiper-container. Параллакс-эффект для таких элементов будет зависеть от общего хода ползунка. Полезно для фона параллакса
• Слайды дочерних элементов. Параллакс-эффект для таких элементов будет зависеть от прогресса слайдов

Чтобы включить эффекты параллакса, вам необходимо инициализировать Swiper с переданным parallax:trueпараметром и добавить один из следующих (или смешать) атрибутов к требуемым элементам:

• data-swiper-parallax— включить трансляционный переход параллакса. Этот атрибут может принимать:
  • number — value in px (как для заголовка, субтитров в примере выше) для перемещения элемента в зависимости от прогресса. В этом случае такой элемент будет перемещаться на ± это значение в px в зависимости от положения слайда (следующего или предыдущего)
  • процент — (как для «parallax-bg») для перемещения элемента в зависимости от прогресса и его размера. В этом случае такой элемент будет перемещаться на ± этот процент от его размера (ширина в горизонтальном направлении и высота в вертикальном направлении) в зависимости от положения слайда (следующего или предыдущего). Поэтому, если элемент имеет ширину 400 пикселей, и вы указали данные-swiper-parallax = «50%», то он будет перемещен на ± 200 пикселей
• data-swiper-parallax-x — то же, но для направления оси х
• data-swiper-parallax-y — то же, но для направления оси Y
• data-swiper-parallax-scale — коэффициент масштабирования элемента параллакса, когда он находится в состоянии «неактивного» (не на активном слайде)
• data-swiper-parallax-opacity — непрозрачность элемента параллакса, когда он находится в состоянии «неактивный» (не на активном слайде)
• data-swiper-parallax-duration — пользовательская продолжительность перехода для элементов параллакса

<div class="swiper-container">
    <!-- Parallax background element -->
    <div
        class="parallax-bg"
        style="background-image:url(http://lorempixel.com/900/600/nightlife/2/)"
        data-swiper-parallax="-23%">
    </div>
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <!-- Each slide has parallax title -->
            <div class="title" data-swiper-parallax="-100">Slide 1</div>
            <!-- Parallax subtitle -->
            <div class="subtitle" data-swiper-parallax="-200">Subtitle</div>
            <!-- And parallax text with custom transition duration -->
            <div class="text" data-swiper-parallax="-300" data-swiper-parallax-duration="600">
              <p>Lorem ipsum dolor sit amet, ...</p>
            </div>
            <!-- Opacity parallax -->
            <div data-swiper-parallax-opacity="0.5" >I will change opacity</div>
            <!-- Scale parallax -->
            <div data-swiper-parallax-scale="0.15" >I will change scale</div>
        </div>
        ...
    </div>
</div>

Параллаксные параметры

Ленивая загрузка

Чтобы включить ленивую загрузку, в первую очередь нам нужна специальная компоновка для изображений или элементов с фоновой подсветкой в ​​слайдах:

<div class="swiper-container">
    <div class="swiper-wrapper">

        <!-- Lazy image -->
        <div class="swiper-slide">
            <img data-src="path/to/picture-1.jpg" class="swiper-lazy">
            <div class="swiper-lazy-preloader"></div>
        </div>

        <!-- Lazy image with srscet-->
        <div class="swiper-slide">
            <img data-src="path/to/logo-small.png" data-srcset="path/logo/logo-large.png 2x" class="swiper-lazy">
            <div class="swiper-lazy-preloader"></div>
        </div>

        <!-- Element with lazy background image -->
        <div class="swiper-slide">
            <div data-background="path/to/picture-2.jpg" class="swiper-lazy">
                <div class="swiper-lazy-preloader"></div>
            </div>
        </div>

        <!-- Lazy background image on slide itself -->
        <div data-background="path/to/picture-3.jpg" class="swiper-slide swiper-lazy">
            <div class="swiper-lazy-preloader"></div>
        </div>
    </div>
</div>

Как вы видите:

• Каждое ленивое загруженное изображение / элемент должно иметь дополнительный класс «swiper-lazy»
• Ленивый источник изображения для элемента <img> должен быть указан в атрибуте «data-src» вместо «src»
• Lazy image source для элемента <img> должен быть указан в атрибуте data-srcset вместо «srcset»
• В атрибуте «данные-фон» должен указываться ленивый источник фонового изображения

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

<div class="swiper-lazy-preloader"></div>

Или белый-один для темного макета:

<div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>

После этого нам нужно включить ленивую загрузку при инициализации Swiper:

var swiper = new Swiper('.swiper-container', {
    // Disable preloading of all images
    preloadImages: false,
    // Enable lazy loading
    lazy: true
});

Параметры ленивой загрузки

var mySwiper = new Swiper('.swiper-container', {
  lazy: {
    loadPrevNext: true,
  },
});

Предельные методы и свойства загрузки

Ожидаемые загрузки

Эффект Fade

Параметры Fade Effect

Обязательно установите параметр `effect` для` fade`, чтобы это работало.

var mySwiper = new Swiper('.swiper-container', {
  fadeEffect: {
    crossFade: true
  },
});

Эффект Coverflow

Параметры эффекта Coverflow

Убедитесь, что параметр `effect` установлен в` coverflow`, чтобы это работало.

var mySwiper = new Swiper('.swiper-container', {
  coverflowEffect: {
    rotate: 30,
    slideShadows: false,
  },
});

Эффект отражения

Параметры эффекта переворота

Обязательно установите параметр `effect` для` flip`, чтобы это работало.

var mySwiper = new Swiper('.swiper-container', {
  flipEffect: {
    rotate: 30,
    slideShadows: false,
  },
});

Эффект куба

Параметры эффекта куба

Убедитесь, что параметр `effect` установлен в` cube`, чтобы это работало.

var mySwiper = new Swiper('.swiper-container', {
  cubeEffect: {
    slideShadows: false,
  },
});

Недурно

В дополнение к компоненту Controller Swiper поставляется с компонентом Thumbs, который предназначен для работы с дополнительным пальцем swiper более правильным способом, чем контроллер, который используется для синхронизации двух sweepers.

Параметры большого пальца

var mySwiper = new Swiper('.swiper-container', {
  ...
  thumbs: {
    swiper: thumbsSwiper
  }
});

var thumbsSwiper = new Swiper('.swiper-container-thumbs', {
  slidesPerView: 5,
});

var mySwiper = new Swiper('.swiper-container', {
  ...
  thumbs: {
    swiper: thumbsSwiper
  }
});

var mySwiper = new Swiper('.swiper-container', {
  ...
  thumbs: {
    swiper: {
      el: '.swiper-container-thumbs',
      slidesPerView: 5,
      ...
    }
  }
});

Методы и свойства Thumbs

Увеличить

Swiper поддерживает функции масштабирования изображений (аналогично тому, что вы видите на iOS при просмотре одиночной фотографии), где вы можете увеличивать изображение с помощью жестящего пальца и или путем увеличения / уменьшения, дважды нажав на него. В этом случае требуется дополнительная компоновка:

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <div class="swiper-zoom-container">
                <img src="path/to/image1.jpg">
            </div>
        </div>
        <div class="swiper-slide">
            <div class="swiper-zoom-container">
                <img src="path/to/image2.jpg">
            </div>
        </div>
        <div class="swiper-slide">Plain slide with text</div>
        <div class="swiper-slide">
            <!-- Override maxRatio parameter -->
            <div class="swiper-zoom-container" data-swiper-zoom="5">
                <img src="path/to/image1.jpg">
            </div>
        </div>
    </div>
</div>

Все «масштабируемые» изображения должны быть обернуты с помощью swiper-zoom-containerкласса div . Обратите внимание: он не поддерживает масштабирование всего остального, кроме одного изображения.

Вы можете переопределить maxRatioпараметр для определенных слайдов, используя data-swiper-zoomатрибут в контейнере масштабирования.

Параметры масштабирования

var mySwiper = new Swiper('.swiper-container', {
  zoom: {
    maxRatio: 5,
  },
});

Методы масштабирования и свойства

Управление клавиатурой

Параметры управления клавиатурой

var mySwiper = new Swiper('.swiper-container', {
  keyboard: {
    enabled: true,
    onlyInViewport: false,
  },
});

Методы и свойства клавиатуры

Управление мышью

Параметры управления мышью

var mySwiper = new Swiper('.swiper-container', {
  mousewheel: {
    invert: true,
  },
});

Методы и свойства Mousewheel

Виртуальные слайды

Модуль Virtual Slides позволяет сохранять необходимое количество слайдов в DOM. Это очень полезно с точки зрения производительности и памяти, если у вас много слайдов, особенно слайдов с тяжелым деревом DOM или изображениями.

Параметры виртуальных слайдов

var mySwiper = new Swiper('.swiper-container', {
  virtual: {
    slides: ['Slide 1', 'Slide 2', 'Slide 3', 'Slide 4', 'Slide 5'],
  },
});

Виртуальные слайды Методы и свойства

renderExternal Example

renderExternal позволяет обходить показ слайдов другим библиотекам и может быть супер удобно с такими библиотеками, как React.js и Vue.js

С Vue.js

<template>
  <!-- ... -->
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <!-- It is important to set "left" style prop on every slide -->
      <div class="swiper-slide"
        v-for="(slide, index) in virtualData.slides"
        :key="index"
        :style="{left: `${virtualData.offset}px`}"
      >{{slide}}</div>
    </div>
  </div>
  <!-- ... -->
</template>
<script>
  import Swiper from 'swiper/dist/js/swiper.esm.bundle';

  export default {
    data() {
      return {
        // dummy slides data
        slides: (function () {
          var slides = [];
          for (var i = 0; i < 600; i += 1) {
            slides.push('Slide ' + (i + 1));
          }
          return slides;
        }()),
        // virtual data
        virtualData: {
          slides: [],
        },
      }
    },
    mounted() {
      const self = this;
      const swiper = new Swiper('.swiper-container', {
        // ...
        virtual: {
          slides: self.slides,
          renderExternal(data) {
            // assign virtual slides data
            self.virtualData = data;
          },
        },
      });
    },
  };
</script>

С React.js

import React from 'react';
import Swiper from 'swiper/dist/js/swiper.esm.bundle';

export default class extends React.Component {
  constructor() {
    this.state = {
      // dummy slides data
      slides: (function () {
        var slides = [];
        for (var i = 0; i < 600; i += 1) {
          slides.push('Slide ' + (i + 1));
        }
        return slides;
      }()),
      // virtual data
      virtualData: {
        slides: [],
      },
    }
  }
  componentDidMount() {
    const self = this;
    const swiper = new Swiper('.swiper-container', {
      // ...
      virtual: {
        slides: self.state.slides,
        renderExternal(data) {
          // assign virtual slides data
          self.setState({
            virtualData: data,
          });
        }
      },
    });
  }
  render() {
    {/* ... */}
    <div className="swiper-container">
      <div className="swiper-wrapper">
        {/* It is important to set "left" style prop on every slide */}
        {this.state.virtualData.slides.map((slide, index) => (
          <div className="swiper-slide"
            key={index}
            style={{left: `${virtualData.offset}px`}}
          >{slide}</div>
        ))}
      </div>
    </div>
    {/* ... */}
  }
}

Навигация по хачкам

Навигация хэша предназначена для ссылки на конкретный слайд, который позволяет загружать страницу с определенным слайдом.

Чтобы заставить его работать, вам нужно включить его, передав hashNavigation:trueпараметр и добавив хэши слайдов в data-hashатрибут:

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide" data-hash="slide1">Slide 1</div>
        <div class="swiper-slide" data-hash="slide2">Slide 2</div>
        <div class="swiper-slide" data-hash="slide3">Slide 3</div>
        <div class="swiper-slide" data-hash="slide4">Slide 4</div>
        <div class="swiper-slide" data-hash="slide5">Slide 5</div>
        ...
    </div>
</div>

var swiper = new Swiper('.swiper-container', {
  //enable hash navigation
  hashNavigation: true
})

Параметры навигации по hash

var mySwiper = new Swiper('.swiper-container', {
  hashNavigation: {
    replaceState: true,
  },
});

История навигации

Параметры навигации по истории

var mySwiper = new Swiper('.swiper-container', {
  history: {
    replaceState: true,
  },
});

<!-- will produce "slides/slide1" url in browser history -->
<div class="swiper-slide" data-history="slide1"></div>

контроллер

Параметры контроллера

var mySwiper = new Swiper('.swiper-container', {
  controller: {
    inverse: true,
  },
});

Доступность (a11y)

Параметры доступности

var mySwiper = new Swiper('.swiper-container', {
  a11y: {
    prevSlideMessage: 'Previous slide',
    nextSlideMessage: 'Next slide',
  },
});

Пользовательская сборка

У вас есть два варианта создания пользовательской версии Swiper.

1. Использование ES-модуля

Если вы используете связку с поддержкой ES-модулей в своем проекте, вы можете импортировать только нужные вам модули:

// Import Swiper and modules
import { Swiper, Navigation, Pagination, Scrollbar } from 'swiper/dist/js/swiper.esm.js';

// Install modules
Swiper.use([Navigation, Pagination, Scrollbar]);

// Now you can use Swiper
var swiper = new Swiper('.swiper-container', {
  speed: 500,
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  // ...
});

Следующие модули экспортируются из swiper.esm.js:

• Swiper — основная библиотека
• Virtual — Модуль виртуальных слайдов
• Keyboard — Модуль управления клавиатурой
• Mousewheel — Модуль управления Mousewheel
• Navigation — Модуль навигации
• Pagination — Модуль разбивки на страницы
• Scrollbar — Модуль прокрутки
• Parallax — Модуль Parallax
• Zoom — Модуль масштабирования
• Lazy — ленивый модуль
• Controller — Модуль контроллера
• A11y — Модуль доступности
• History — История
• HashNavigation — Модуль навигации Hash
• Autoplay — Модуль автовоспроизведения
• EffectFade — Модуль Fade Effect
• EffectCube — Модуль эффектов куба
• EffectFlip — Модуль Flip Effect
• EffectCoverflow — Модуль эффектов Coverflow

2. Использование скрипта сборки

Swiper поставляется с gulp builder, который позволяет создавать пользовательскую версию библиотеки, где вы можете включать только необходимые модули. Нам нужно следующее:

1. Загрузите и распакуйте репозиторий Swiper GitHub в локальную папку
2. Установите Node.js (если не установлен)
3. Установите Gulp (если не установлен), выполнив следующую команду в терминале:

   $ npm install --global gulp

4. Теперь нам нужно установить необходимые зависимости. Перейдите в папку с загруженным и распакованным хранилищем Swiper и выполните в терминале:

   $ npm install

5. Открыть scripts/build-config.jsфайл:

   module.exports = {
     // remove components you don't need
     components: [
       'virtual',
       'keyboard',
       'mousewheel',
       'navigation',
       'pagination',
       'scrollbar',
       'parallax',
       'zoom',
       'lazy',
       'controller',
       'a11y',
       'history',
       'hash-navigation',
       'autoplay',
       'effect-fade',
       'effect-cube',
       'effect-flip',
       'effect-coverflow',
     ],
     // target device, can be "desktop" or "universal"
     target: 'universal',
     // default color of navigation elements
     themeColor: '#007aff',
     // additional color to be included
     colors: {
       white: '#ffffff',
       black: '#000000',
     },
   };

6. Теперь мы готовы создать пользовательскую версию Swiper:

   $ npm run build:prod

7. Это все. Сгенерированные файлы CSS и JS и их мини-версии будут доступны в dist/папке.