В данной статье мы хотели бы рассказать вам о прекрасном иструменте-плагине для создания анимационных слайдеров изображений и текста на своем сайте. Предметом нашего сегодняшнего внимания послужит 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 имеет ряд параметров, которые вы можете задать при инициализации карусели. Параметры определяют поведения карусели, типы анимации и описывают нестандартные ситуации.

Параметр Описание
list

Задает указатель на элемент list в карусели jCarousel. Пример:

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

Задает указатель на элемент item в карусели jCarousel. Пример:

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

Параметр задает скорость прокрутки слайдов карусели. Параметр принимает 2 значения: fast или slow. Также существует альтернативная конфигурация анимации jQuery.animate. Пример:

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

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

Параметр определяет и жестко указывает использование аппаратных ускорителей анимации и CSS3. Принимает значения: true или false.

Важно!!! jCarousel не умеет определять поддержку браузера стандарта  CSS3. Вы должны самостоятельно определять поддержку CSS3 браузером. Пример:

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

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

Параметр определяет поведения карусели при окончании цикла прокрутки. Принимает значения: first, last, both или circular. Пример:

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

Параметр задает ориентацию карусели как вертикальную. Если параметр не указан - карусель пытается автоматически определить ориентацию по соотношению сторон ширины и высоты. Принимает значения: true или false. Пример:

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

Параметр задает режим прокрутки карусели jCarousel с права на лево. Принимает значения: true или false. Пример:

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

Пример с dir атрибутом:

<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. Рассмотрели примеры обращения к методам и свойствам.

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

Лучший способ сказать автору «СПАСИБО»рассказать друзьям или поделиться ссылкой!
Другие статьи:
Плагин DateTimePicker для сайта - инструкция, настройка, инициализация

05/02/2019

DateTimePicker – удобный и легкий в использовании плагин для быстрой подстановки даты и времени в поля ввода.

Плагин DateTimePicker для сайта - инструкция, настройка, инициализация
Плагин маски ввода для input - jquery maskedinput - инструкция, настройка, инициализация

23/01/2019

В этой статье будет рассмотрено решение этой задачи с использованием плагина Masked Input, который отличается простотой и удобством в использовании.

Плагин маски ввода для input - jquery maskedinput - инструкция, настройка, инициализация
Публикация на стене Вконтакте средствами API - кросспостинг

24/03/2017

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

Публикация на стене Вконтакте средствами API - кросспостинг
Чтение excel на PHP - основные методы класса PHPExcel

03/11/2016

С помощью PHPExcel можно производить чтение и запись информации в файлы, форматировать их содержимое,выполнять операции с формулами, стилями и т.д.

Чтение excel на PHP - основные методы класса PHPExcel
TinyMCE вырезает теги - исключения для тегов TinyMCE

21/09/2016

Текстовый редактор TinyMCE в визуальном режиме при стандартной конфигурации обрезает некоторый теги и свойства.

TinyMCE вырезает теги - исключения для тегов TinyMCE
Cвойства и методы TinyMCE - вставка тегов, вывод значений

21/09/2016

Научимся вставлять теги в выделенный фрагмент текста, вставлять теги на место селектора в тексте и получать средствами JS HTML код отредактированного текста и текст без HTML сущностей.

Cвойства и методы TinyMCE - вставка тегов, вывод значений
Установка и настройка TinyMCE - инициализация и параметры

21/09/2016

Как вы уже поняли, редактор является платформенным Javascript редактором HTML кода, т.е. WYSIWYG редактором для сайтов и веб приложений. Разработчиком этого полезного продукта является компания Moxiecode Systems AB.

Установка и настройка TinyMCE - инициализация и параметры
Инструкция SMTP PHPMailer - свойства и методы класса

20/09/2016

Любой backend программист php сталкивается с задачей автоматизации почтовой рассылки на веб сайтах и многие,кто сталкивался с данной задачей впервые, вставали перед ключевым вопросом: "Писать или не писать smtp клиент с нуля?".

Инструкция SMTP PHPMailer - свойства и методы класса