Делаем слайдер для сайта. Видео урок. Подключение и настройка owl carousel

Делаем слайдер для сайта. Подключение и настройка owl carousel

Всем привет. В этом уроке мы научимся подключать и настраивать слайдер для сайта или страницы. В итоге у нас получится вот такая карусель. Слайды в виде фотографий, стрелочки чтобы листать ее — вперед и назад. И пагинация — кружки под слайдом, которая будет показывать какой по порядку слайд сейчас включен.

Делаем слайдер для сайта. Подключение и настройка owl carousel

Owl carousel — jQuery карусель — скачать, документация

GitHub репозиторий: github.com/OwlFonk/OwlCarousel

Документация: htmlpreview.github.io/?https://github.com/OwlFonk/OwlCarousel…

Сайт плагина: owlgraphic.com/owlcarousel/ (на момент написания статьи — не работает)

Файлы урока: https://yadi.sk/d/O9g9i8qo3Bhrft

 

Видео урока

Шаг 1. Скачиваем и подключаем карусель

Так как домен сайта с документацией по данной карусели сейчас (на момент написания статьи) не работает, мы будем работать с github репозиторием в котором можно скачать код и посмотреть документацию данного плагина.

Переходим на репозиторий карусели и кликаем по зеленой кнопке «Clone or download», далее нажимаем «Download ZIP». Теперь у вас есть файлы для подключения к проекту.

Разархивируем файлы, находим внутри папку с названием «owl-carousel» и кладем к себе в проект внутри папки «libs». У вас расположение может быть и другим, но я в уроке буду использовать именно такое.

Подключаем карусель. В шапке страницы, внутри тега head подключаем CSS стили:

<head>
...
<!-- Owl Carousel -->
<link rel="stylesheet" href="libs/owl-carousel/owl.carousel.css">
<link rel="stylesheet" href="libs/owl-carousel/owl.transitions.css">
<link rel="stylesheet" href="libs/owl-carousel/owl.theme.css">
</head>

В конце страницы, перед закрывающим тегом </body> подключаем jQuery библиотеку (я использовал ссылку на jQuery которая расположена в интернете на сайте Googleapis )

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<!-- Owl Carousel -->
<script src="libs/owl-carousel/owl.carousel.min.js"></script>

<!-- custom scripts -->
<script src="js/main.js"></script>

На этом шаге мы подключили файлы плагина карусели к нашей странице.

 

Шаг 2. Подготовим html разметку

Создадим html разметку под слайды для нашей карусели.

<div id="slider_container" class="owl-carousel">
    <img src="img/01.jpg" alt="Image Nature">
    <img src="img/02.jpg" alt="Image Nature">
    <img src="img/03.jpg" alt="Image Nature">
    <img src="img/04.jpg" alt="Image Nature">
    <img src="img/05.jpg" alt="Image Nature">
    <img src="img/06.jpg" alt="Image Nature">
</div>

Основные правила здесь следующие:

      1. Необходимо создать общий контейнер, в котором будут лежать слайды нашей карусели. У нас это контейнер <div id="slider_container" class="owl-carousel"> ... </div>. Задаем ему класс class="owl-carousel" чтобы применить нужные стили из библиотеки карусели. И даем ему id="slider_container". Значение id может быть любым. По нему мы будем обращаться и вызывать (запускать) нашу карусель.

Внутри контейнера, создаем блоки для слайдов. они должны иметь одинаковую структуру. Така как у нас это только картинки, поэтому мы кладем сюда 6 изображений. Естественно количество слайдов может быть любым. Если необходимо положить в слайд не только изображение, но и текст, и другие элементы, то каждый слайд необходимо будет обернуть в пустой div.

    В таком случае, выглядеть это будет вот так:
<div id="slider_container" class="owl-carousel">
    <div>
        <h3>Some text</h3>
        <img src="img/01.jpg" alt="Image Nature">
    </div>
    <div>
        <h3>Some text</h3>
        <img src="img/02.jpg" alt="Image Nature">
    </div>
    <div>
        <h3>Some text</h3>
        <img src="img/03.jpg" alt="Image Nature">
    </div>
    ...
</div>

Но мы будем делать только для картинок, поэтому этот листинг (пример разметки) использовать не будем.

 

Шаг 3. Вызов (инициализация) плагина

Теперь надо запустить нашу карусель. Иными словами, нужно сказать плагину что див с id=»slider_container» это контейнер нашей карусели. Для этого в файле main.js пропишем следующее:

$(document).ready(function() {

    /* Call OwlCarousel plugin */
    $("#slider_container").owlCarousel();
    
});

Конструкция $(document).ready(function() { … }); здесь означает то что код внутри нее сработает тогда, когда будет загружена библиотека jQuery и вся HTML страница. После этого произойдет вызов плагина карусели — то есть ко который написан внутри.

Сам вызов карусели происходит следующей конструкцией: $("#slider_container").owlCarousel(); Здесь идет выбор элемента контейнера для карусели, у нас это #slider_container то есть div с id=#slider_container, и далее к нему прикручивается карусель.

На этом шаге подключение карусели может быть закончено, так как теперь она подключена и работает.

 

Шаг 4. Настройка карусели

При подключении плагина, мы можем задать карусели определенные настройки, которые описаны в документации. Делается это путем передачи объекта с параметрами, при инициализации плагина. Выглядит следующим образом:

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

$("#slider_container").owlCarousel({

    // Most important owl features
    items : 1,
    itemsCustom : false,
    itemsDesktop : [1199,4],
    itemsDesktopSmall : [980,3],
    itemsTablet: [768,2],
    itemsTabletSmall: false,
    itemsMobile : [479,1],
    
    singleItem : true,
    
    //Autoplay
    autoPlay : false,
    stopOnHover : false,
    
    // Navigation
    navigation : true,
    navigationText : ["<img src=\"img/arrow_left.png\">","<img src=\"img/arrow_right.png\">"],
    rewindNav : true,
    scrollPerPage : false,
  
    //Transitions
    transitionStyle : "backSlide"

});

Параметры типа items определяют какое количество слайдов будет отображаться на разных размерах экрана. Параметр autoPlay определяет будет ли карусель сама автоматически перелистывать слайды. stopOnHover — будет ли авто-проигрывание останавливаться по наведению курсора на слайд или нет.

Параметр navigation — показ стрелочек для переключения слайдов. transitionStyle — специальный эффект смены слайдов. Чтобы он работал, в шапке необходимо подключить файл owl.transitions.css.

Названия параметров чувствительны к регистру.

 

Шаг 5. Настройка внешнего вида

Если необходимо поработать над внешним видом, и изменить CSS стили карусели, то сделать это можно в файле owl.theme.css. Это файл темы который отвечает за внешний вид, и его можно смело редактировать. Чего не скажешь о файле owl.carousel.css, его трогать не стоит. Подробно процесс настройки внешнего вида есть в видео уроке. В двух словах — открываем файл с темой и инспектор в браузере. С помощью инспектора определяем элемент и классы которые нужно поправить, и далее правим их в файле с темой.

 

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

Скачать архив с уроком: https://yadi.sk/d/O9g9i8qo3Bhrft