Установка и настройка JCAROUSEL. Параметры и методы

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

jCarousel это jQuery карусель, плагин для управления данными, отображаемых в виде горизонтального или вертикального списка. Данные могут быть представлены как обычный HTML контент или могут быть загружены с помощью AJAX. Списку можно задать прокрутку вперед или назад, с анимацией или без нее. Основным примечательным признаком карусели является его богатый функционал и широкие возможности настройки слайдера под свои нужды. Данные слайдер является "резиновым" и способен адаптироваться под любую верстку. Имеет возможность конфигурировать время задержки, прокрутки, тип анимации, размещать текстовые блоки и блоки с текстовым описанием слайдера уже из коробки. На основе плагина jCarousel можно легко создать полосы прокрутки как текстового наполнения, графического так и текстово-графического содержания.

Скачать вы можете на сайте GitHub: https://github.com/jsor/jcarousel/releases

Примеры реализаций на официальном сайте: http://sorgalla.com/jcarousel/examples/

Установка и инициализация плагина jCarousel на сайте 

Для работы карусели jCarousel необходимо создать следующую структуру HTML сущностей, подключить библиотеку jQuery, JS плагин и таблицу стилизации карусели( css файл):

<script type="text/javascript" src="/path/to/jquery.js"></script>
<script type="text/javascript" src="/path/to/lib/jquery.jcarousel.js"></script>
<link rel="stylesheet" type="text/css" href="/path/to/skin/skin.css" />

 <div class="jcarousel"> <--------------------------------| Root element
   <ul> <-------------------------------| List element  |
        <li>...</li> <---| Item element  |               |
        <li>...</li> <---| Item element  |               |
    </ul> <------------------------------|               |
</div> <-------------------------------------------------|

Вы можете создавать свою стилизацию карусели опираясь на файл css из примеров. Карусель jCarousel может состоять из различных HTML тегов, но обязательно должен сводиться к данной конструкции:

<div class="jcarousel"> <-------------------------------| Root element
    <div> <------------------------------| List element  |
        <p>...</p> <-----| Item element  |               |
        <p>...</p> <-----| Item element  |               |
    </div> <-----------------------------|               |
</div> <-------------------------------------------------|

Для инициализация jQuery карусели jCarousel необходимо разместить следующий код:

(function($) {    $(function() {
    $('.jcarousel').jcarousel({         // Конфигурация инициализации     }); 
});

 Параметры инициализации карусели jCarousel

Карусель jCarousel имеет ряд параметров, которые вы можете задать при инициализации карусели. Параметры определяют поведения карусели, типы анимации и описывают нестандартные ситуации.

$('.jcarousel').jcarousel({ list: '.jcarousel-list' });

$('.jcarousel').jcarousel({ items: '.jcarousel-item' });

$('.jcarousel').jcarousel({ animation: 'slow' }); 

$('.jcarousel').jcarousel({
    animation: {
        duration: 800,
        easing: 'linear',
        complete: function() {} 
    } 
});

$('.jcarousel').jcarousel({ transitions: true });

$('.jcarousel').jcarousel({ 
    transitions: Modernizr.csstransitions ? {
        transforms: Modernizr.csstransforms,
        transforms3d: Modernizr.csstransforms3d,
        easing: 'ease' 
    } : false
});

$('.jcarousel').jcarousel({ wrap: 'both' });

$('.jcarousel').jcarousel({ vertical: true });

$('.jcarousel').jcarousel({ rtl: true });

<div class="jcarousel" dir="rtl">
    <ul>
        <li>...</li>
    </ul>
</div>

<script>
$('.jcarousel').jcarousel();
</script>

Обращение к методам карусели jCarousel

jQuery карусель jCarousel имеет возможность обращения к свойствам и методам классов jCarousel. В данном разделе мы рассмотрим самые популярные примеры. Полное описание классов и методов вы можете найти в документации на официальном сайте разработчика:

Документация на официальном сайте: http://sorgalla.com/jcarousel/docs/

Кнопки навигации карусели

Управление прокруткой карусели jCarousel предусмотрено при помощи кнопок навигации — управления. Для установки и инициализации кнопок управления каруселью необходимо создать следующую структуру HTML сущностей на своем сайте: 

<!-- Wrapper -->
<div>
    <!-- Carousel -->
    <div class="jcarousel">
        <ul>
            <li>...</li>
            <li>...</li>
        </ul>
    </div>
    <!-- Controls -->
    <a class="jcarousel-prev" href="#">Prev</a>
    <a class="jcarousel-next" href="#">Next</a>
</div>

<script>
$(function() {
    $('.jcarousel').jcarousel({
        // Конфигурация инициализации
    });

    $('.jcarousel-prev').jcarouselControl({ target: '-=1' });
    $('.jcarousel-next').jcarouselControl({ target: '+=1' });
});
</script>

Нумерация слайдов карусели - пагинация

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

 <!-- Wrapper -->
<div>
    <!-- Carousel -->
    <div class="jcarousel">
        <ul>
            <li>...</li>
            <li>...</li>
        </ul>
    </div>

    <!-- Pagination -->
    <div class="jcarousel-pagination">
        <!-- Pagination items will be generated in here -->
    </div>
</div>

<script>
$(function() {
    $('.jcarousel').jcarousel({
        // Конфигурация инициализации
    });

    $('.jcarousel-pagination').jcarouselPagination({
        item: function(page) {
            return '<a href="#' + page + '">' + page + '</a>';
        }
    })
});
</script>

Автоматическая прокрутка карусели

Карусель имеет самое востребованное и популярное свойство — автопрокрутка содержимого карусели. При вызове данного метода вы можете задать свойства автопрокрутки, такие как: время задержки слайдов карусели; шаг прокрутки; автостарт. Для инициализации автопрокрутки карусели jCarousel необходимо вызвать метод jcarouselAutoscroll:

$(function() {
    $('.jcarousel')
        .jcarousel({
            // Конфигурация инициализации
            })

        .jcarouselAutoscroll({
            interval: 3000,
            target: '+=1',
            autostart: true
        });
});

Итог статьи

Как итог мы хотели бы подвести к общему знаменателю и еще раз выделить актуальность и многофункциональность jQuery карусели jCarousel. По итогам статьи мы познакомились с каруселью и научились устанавливать, инициализировать карусель на сайт. Рассмотрели конструкцию и принцип работы в примерах. Ознакомились с возможными параметрами инициализации и популярными методами и свойствами классов jCarousel. Рассмотрели примеры обращения к методам и свойствам.

Всем спасибо за внимание!