Categories

Новые шаблоны

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

Erica Saunders Февраль 26, 2016
Rating: 5.0/5. From 4 votes.
Please wait...

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

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

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

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

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

    47.JS_Animated.How_to_manage_Swiper_Slider_1
  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».

    Например:

    			<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 и обновите текст слайда ниже. Обратите внимание на следующий пример:

    			<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. Далее, обновите страницу сайта для просмотра внесённых изменений.

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

JS Animated. Как работать со слайдером Swiper
Эта запись была размещена в JS Animated туториалы и помечена как HTML, slider, Swiper. Добавьте в закладки постоянную ссылку.

Submit a ticket

Если вы не смогли найти подходящее решение проблемы, пожалуйста воспользуйтесь следующей ссылкой, чтобы отправить запрос команде технической поддержки.
Отправить запросВы получите ответ в течение 24 часов