JS Animated. Как работать со слайдером Swiper

Наша Команда техподдержки рада представить Вам новый туториал, который покажет, как работать со слайдером Swiper в Веб-шаблонах.

Скрипт «Swiper.js» используется для того, чтобы добавить слайдер в наши шаблоны Веб-сайтов. У этого слайдера есть расширенный интерфейс программирования приложений для взаимодействия, так что редактирование слайдера является достаточно простым. Вам не нужно редактировать файлы javascript. Для того чтобы внести изменения в слайдер, следуйте таким инструкциям:

1. Подключитесь к вашему клиенту FTP или откройте Файловый менеджер Панели управления хостингом, для того чтобы получить доступ к файлам сайта.

2. Откройте ваш файл *.html, для того чтобы найти код слайдера на странице (как правило, это файл index.html). Используйте Ctrl+F, для того чтобы выполнить поиск по ключевому слову ‘swiper’, или просто прокрутите страницу вниз, для того чтобы увидеть блок слайдера:

   

3. Вы можете указать параметры слайдера в атрибуте data-parameter, где ‘parameter’ — это настройка, которую Вам нужно будет изменить, например, data-height позволит Вам изменить высоту слайдера. Ниже, Вы можете найти список атрибутов, доступных для изменения (для целевого элемента с классом «swiper-slider»):

   • data-height — задаёт высоту слайдера в пикселях (определяет статическую высоту, она останется неизменной при изменении разрешения экрана); *% (определяет высоту слайдера как процент от его ширины); *vh (определяет высоту слайдера как процент от высоты окна).

   • data-min-height — определяет минимальную высоту слайдера, подобно атрибуту data-height.

   • data-autoplay — определяет автоматическое начало показа слайдов. Вы можете задать значения «Да»/«Нет», для того чтобы включить/отключить автоматическое воспроизведение слайдов. Вы можете также указать временной показатель в миллисекундах, для того чтобы задать временной отрезок между переключениями слайдов, например, data-autoplay=»3000″.

   • data-loop — определяет, остановится ли воспроизведение слайдов на последнем слайде. Вы можете задать значения «Да»/«Нет», например, data-loop=»false».

   • data-direction — определяет направление переключения слайдов. Вы можете задать значения «Горизонтально»/»Вертикально», например, data-direction=»horizontal».

   • data-slide-effect — определяет эффект слайдера. Вы можете задать значения fade/slide/coverflow/cube, например, data-slide-effect=»slide».

   Например:

   ?

   1 2 3 4

   <div class="swiper-container swiper-slider" data-height="80vh" data-min-height="30px" data-autoplay="true" data-loop="false" data-direction="vertical" data-slide-effect="coverflow">     Slider content </div>

4. Для того чтобы изменить содержимое слайдов, просто измените путь к изображению слайда в атрибуте data-slide-bg и обновите текст слайда ниже. Обратите внимание на следующий пример:

   ?

   1 2 3 4 5 6 7

   <div class="swiper-slide" data-slide-bg="images/page-01_slide01.jpg">     <div class="swiper-slide-caption">         <span class="rectangle"></span>         <h1>The first slide goes here</h1>     </div> </div>

   где «images/page-01_slide01.jpg» – это изображение слайда, а всё содержимое в блоке с классом «swiper-slide-caption» – это текст слайда.

5. Сохраните изменения и загрузите файл назад на сервер после редактирования, если Вы используете FTP. Далее, обновите страницу сайта для просмотра внесённых изменений.

Вы можете также ознакомиться с детальным видео-туториалом ниже: