JS Animated. Как работать с каруселью Owl

Из этого туториала Вы узнаете, как работать с Каруселью Owl в JS-анимированных шаблонах:

1. Исследуйте карусель, используя Инструмент разработчика в браузере Chrome или Firebug в браузере Firefox. Вы увидите, что в данном разделе используется Карусель Owl:

   

2. Откройте соответствующий index файл в вашем редакторе. Найдите нужный фрагмент кода, используя функцию поиска редактора:

   

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

   

4. Вставьте код. Убедитесь, что Вы сохранили структуру кода. Измените текст и изображение:

   

5. Сохраните изменения, загрузите изменённый файл на ваш сервер. Обновите страницу. Вы добавили новый элемент карусели:

   

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

   

7. Параметры автовоспроизведения карусели (Carousel autoplay configuration): Для того чтобы включить автовоспроизведение слайдов, используйте атрибут data-autoplay:

   

8. Для того чтобы отобразить элементы управления "Предыдущий"/"Следующий" в Карусели Owl, используйте атрибут data-nav="true" для карусели. Такой атрибут есть в нашей карусели. Обратите внимание на предыдущий ниже.

   Вы можете отключить элементы управления, выбрав false вместо true.

9. При помощи Карусели Owl Вы можете отобразить один элемент или несколько элементов сразу. Для того чтобы работать с отображением элементов карусели, используйте соответствующий атрибут data-items и data-*-items. Обратитесь к документации шаблона для получения более детальной информации. Мы добавили атрибуты data-lg-items="1" и data-md-items="1":

   

   Теперь одновременно отображается два элемент карусели.

   

10. Давайте узнаем, как работает другая Карусель Owl. Мы исследовали карусель, используя инструмент разработчика в Chrome. Эта карусель предлагает аналогичное содержимое. Элементы управления каруселью не отображаются, изображения отображаются при помощи лайтбокса:

    

11. Найдите соответствующий фрагмент кода. Атрибут data-stage-padding определяет отступ карусели. Его можно применить для устройств с разным расширением экрана. Атрибут data-lightbox, определяет, будет ли для галереи использоваться лайтбокс:

    

12. Следующий фрагмент кода определяет анимационный эффект для отдельного изображения:

    

13. Вы можете удалить лайтбокс для отдельного изображения. Удалите следующий фрагмент кода:

    

14. Ознакомьтесь с документацией шаблона, для получения более детальной информации (Расширения – Карусель Owl).

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