Карусель позволяет пользователям увидеть контент в виде изображений, которые периодически пролистываются по таймеру. Так работают стандартные скрипты. Но, что если нам потребуется установить вертикальную карусель?
Это требуется достаточно редко, например, при создании блока с работами компании в правой части сайта. Для решения этой задачи можно использовать специальный плагин 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
(Пока оценок нет)
Загрузка...