Главная › Новости

Карусель вертикальная и горизонтальная jsCarousel для сайта

Опубликовано: 06.09.2018

Как подключить к сайту плагин zoom-cloud?

Карусель позволяет пользователям увидеть контент в виде изображений, которые периодически пролистываются по таймеру. Так работают стандартные скрипты. Но, что если нам потребуется установить вертикальную карусель?

Уроки по Bootstrap 3 | #6 Слайдер контента

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

У данного плагина есть множество настроек, которые вы увидите в начале кода скрипта:

onthumbnailclick: function(src) { } - функция при нажатии на картинку autoscroll: true - вкл/выкл автопрокрутку itemstodisplay: 5 - сколько слайдов отображать scrollspeed: 1500 - время эффекта прокрутки delay: 3000, - время прокрутки слайдов orientation: 'h' - горизонтальная h или вертикальная v карусель circular: true - зацикленная прокрутка слайдеров

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

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

И небольшой совет, если будете использовать вертикальную карусель, то высота задается в классах jscarousal-vertical и jscarousal-contents-vertical