Слайдер jCarousel

Данная статья посвящена обзору еще одного js-плагина для создания slideshow из картинок – jCarousel. Автором данного скрипта является Jan Sorgalla. Хотя мне эти имя и фамилия ни о чем не говорит, но они запоминающиеся. Название данного плагина я запомнил по имени его автора раньше, чем по имени самого скрипта. Это было типа шутки, конечно… )))

Скрипт jCarousel по популярности в списке плагинов типа carousel занимает второе место после скрипта slick – jQuery Plugins. Кто вдруг не знает, термин carousel (карусель) является общим описанием плагинов и скриптов подобного типа. Плагин jCarousel основан на библиотеке jQuery и предоставляет стандартные возможности управления показом картинок – кнопки перемотки взад-вперед и пагинация картинок. Показ заголовка картинки не предусмотрен, но имеется возможность автоскроллинга изображений.

Особенности плагина jCarousel

Первая особенность плагина заключается в том, что здесь почти ничего не генерируется автоматически, самим скриптом jCarousel. Только пагинация создается с помощью js-кода, все остальное нужно прописывать вручную в HTML-коде. Для меня это было весьма огорчительно, так как такой подход занимает много времени и сил.

Вторая особенность плагина – он имеет модульную структуру. То есть, имеется основная составляющая скрипта jCarousel – jquery.jcarousel-core.min.js, которая на то и является основной, что предоставляет базовые возможности для создания слайдшоу. Если необходимо к слайдшоу добавить возможность прокрутки, то нужно скачать и подключить модуль jquery.jcarousel-control.min.js. Для включения возможности пагинации необходим еще один модуль – jquery.jcarousel-pagination.min.js. Для автоскролинга потребуется модуль jquery.jcarousel-autoscroll.min.js.

В проекте перечисленные выше модули подключаются последовательно, в таком порядке (первые два пункта строго обязательны, остальные могут добавляться, убираться и перемещаться между собой произвольно):

  • библиотека jQuery – jquery-1.11.1.min.js
  • основной модуль jCarousel Core – jquery.jcarousel-core.min.js
  • модуль прокрутки – jquery.jcarousel-control.min.js
  • модуль пагинации – jquery.jcarousel-pagination.min.js
  • модуль автоскроллинга – jquery.jcarousel-autoscroll.min.js

Справедливости стоит сказать, что можно не заморачиваться с отдельными модулями и подключить все одним файлом, по типу “все включено” – jquery.jcarousel.min.js:

  • библиотека jQuery – jquery-1.11.1.min.js
  • плагин jCarousel со всеми его возможностями – jquery.jcarousel.min.js

Страница для скачивания плагина jCarousel одним файлом (Full Download) или отдельными его модулями (Separate Downloads) расположена здесь – jCarousel Dist. Можно получить как Production Version (compressed), так и Development Version (uncompressed). В данной статье будут использоваться сжатые версии скрипта, так как в исходном коде плагина копаться не будем.

Плагин требует для своей работы библиотеку jQuery версии не ниже 1.7 – это также стоит учесть.

Подключение плагина jCarousel

Создаем набросок HTML-страницы и производим подключение плагина jCarousel. Для чистоты и наглядности буду применять подход модульности плагина. Как и любой другой плагин подобного рода, его управление производится через отдельный js-файл произвольного имени, в котором прописываются параметры скрипта. Я создал для этой цели js-файл simple.js и выполнил подключение таким образом:

Шкурка style.css служит для стилизации слайдера jCarousel на HTML-странице, то есть в этом файле будут писаться CSS-стили для всех элементов слайдера jCarousel.

Базовая разметка слайдера jCarousel

Плагин для своей работы требует некоторую обязательную базовую HTML-разметку и CSS-стили к ней. HTML-разметка может быть не обязательно именно такой, как представлена ниже, но основная ее структура должна сохраняться:

То есть, должен присутствовать блок-обертка с классом class="jcarousel" (имя класса может быть произвольным), внутри которого должен находиться еще один блок-обертка. И затем только идут элементы с картинками. HTML-структура, надо сказать, несколько громоздкая по стандартам сегодняшнего времени.

К обязательной базовой HTML-разметке “прилагаются” не менее обязательные CSS-стили (меня эти обязательства уже начинают удручать):

Код выше – это конечно не совсем CSS-код. Это SCSS, но наглядность (как мне кажется) от этого только выигрывает из-за ярко выраженного nesting, присущего Sass. По крайней мере, ничего не стоит за 5-10 секунд вручную перевести этот SCSS в обычный CSS, если кого вдруг это не устраивает.

В данном примере я воспользовался сервисом Placehold.it для быстрой и удобной генерации картинок в создаваемом слайдшоу.

Для активации слайдера в файле настроек simple.js скрипта jCarousel нужно прописать его инициализацию:

Слайдер уже готов! Правда, увидеть его работу не получиться, так как не заданы настройки скрипта, не созданы элементы для его управления. Приступим к созданию элементов управления слайдера jCarousel.

Создание кнопок прокрутки в jCarousel

Как я уже упоминал ранее, при создании слайдера придется все создавать вручную, прописывая нужные HTML-элементы внутри HTML-документа.

Какой уважающий себя слайдер картинок может существовать без кнопок перемотки изображений взад-вперед? Конечно – никакой! Поэтому потребуется их создать.

Для этого ниже блока со слайдером дописываю две ссылки с классами class="jcarousel-prev" и class="jcarousel-prev":

Блок слайдера, элементы прокрутки (и другие будущие элементы управления слайдером) я поместил внутрь одного общего блока-обертки class="wrap_jcarousel", которому придал несложные CSS-стили:

Кнопки перемотки внутри HTML-разметки созданы, однако необходимо прикрутить к ним действия с помощью js-скрипта. Для этого сначала подключаю модуль прокрутки jquery.jcarousel-control.min.js в HTML-документе:

… а затем в файле настроек simple.js активирую возможность прокрутки слайдера, добавив базовые js-строки:

После стилизации элементов управления и блока-обертки class="wrap_jcarousel" слайдер jCarousel может принять следующий вид:

Слайдер jCarousel с кнопками прокрутки

Слайдер jCarousel с кнопками прокрутки

Попробуем прокрутить картинки взад и вперед с помощью кнопок – все работает!

Добавление пагинации в слайдере jCarousel

Для добавления пагинации в слайдере нужно создать в HTML-разметке дополнительный блок с классом class="jcarousel-pagination":

Больше ничего в него добавлять не нужно – плагин сам сгенерирует (наконец-то сам что создаст!) его содержимое. Нам только необходимо подключить соответствующий модуль jquery.jcarousel-pagination.min.js для пагинации в слайдере:

… а затем активировать его в файле настроек simple.js:

Для стилизации пагинации с данном случае потребуется плагин Firebug под Mozilla Firefox для инспекции генерируемых скриптом jCarousel элементов. Примерный вид слайдера после применения некоторых CSS-стилей может быть таким:

Слайдер jCarousel с пагинацией

Слайдер jCarousel с пагинацией

Проверим работу пагинации и “пощелкаем” на кнопках с циферками – все работает!

Добавление автопрокрутки в jCarousel

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

Первое – подключить модуль автопрокрутки jquery.jcarousel-autoscroll.min.js:

Второе – активировать автопрокрутку в файле настроек simple.js:

Перезапускаю браузер, в котором открыт создаваемый мною слайдер и любуюсь результатом.

Дополнительные украшательства для jCarousel

Что еще можно сделать для созданного слайдера jCarousel? Можно добавить стили для неактивной кнопки прокрутки изображений и для активной кнопки пагинации. Активность и неактивность этих кнопок можно отслеживать в помощью js-строк и “вешать” на нужные состояния кнопок соответствующие CSS-классы.

Для этого файл simple.js преобразую таким образом:

… а в style.scss добавлю строки:

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

Заключение jCarousel

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

Полный код рассмотренного в данной статье примера создания слайдера приведен ниже.

HTML-код:

SCSS-код:

JS-код:

На этом все – удачного кодинга!

Оцените статью:
1 Star2 Stars3 Stars4 Stars5 Stars (2 votes, average: 5,00 out of 5)

Loading...Loading...

Меткой на:

Один комментарий к “Слайдер jCarousel

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *


шесть − 2 =

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">


Яндекс.Метрика Rambler's Top100