Часто на сайтах можно увидеть прокрутку элементов, например, под какой-нибудь публикацией. Это выглядит красиво и позволяет экономить место на сайте. Но чаще всего такая прокрутка горизонтального типа. А что если нам нужна вертикальная прокрутка баннеров или новостей?
Для этого будем использовать плагин на jQuery, с очень гибкими настройками. Я нашел его где-то на западном сайте, причесал код, разобрался во всех настройках и готов с ним поделиться.
Давайте посмотрим возможности карусели:
- Позволяет создать неограниченное количество таких ротаций на странице (просто сменив идентификатор);
- Можно вкл /выкл автопрокрутку на странице и менять время смены баннеров;
- Позволяет назначить на любые идентификаторы кнопки навигации, за счет которых можно двигать слайды вперед, назад, запускать и останавливать карусель;
- При наведении мыши на карусель, можно отключить ее автопрокрутку;
- Возможность настроить максимальное количество элементов, которое нужно отобразить.
Установка вертикальной карусели
1. Просто подключите jquery.totemticker.js и и библиотеку jQuery;
2. Затем пропишите код:
<script type="text/javascript">
$(function(){
$('.ticker1').totemticker({
row_height : '100px',
max_items : 2,
});
});
</script>
- где .ticker1 - класс, на который запустится карусель. Здесь стоит учесть важный параметр row_height - это высота каждого баннера. Она у всех должна быть одинаковой. Это самое главное условие для корректной работы скрипта. Например, если вы определили, что у вас высота элемента будет всегда 235px, то ставьте это значение в row_height.
В скачанном примере вы найдете расшифровку всех важных настроек.
