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

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

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

18/02/2020

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

Всплывающая фиксированная навигация для сайта jQuery, CSS - инструкция, примеры
Плагин 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 - свойства и методы класса