Javascript → jQuery Tools Scrollable — лёгкий скроллер контента
Хочу рассказать о лёгком jQuery скроллере (слайдер? карусель?) jQuery Tools Scrollable.
Возможности
- Горизонтальный и вертикальный скроллинг
- Скроллинг с помощью навигационных кнопок, поддержка клавиатуры и мышиного скролла.
- Любое количество скроллируемых элементов.
- Различная ширина как для скроллера, так и для элементов, в том числе в процентах.
- Программируемые действия.
- Возможность динамически добавлять элементы.
- Возможность установить бесконечный цикл, без начала и конца.
- Маленький размер: меньше 2 kb в gzip-e.
Использование
Подключаем jQuery и jQuery Tools:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script src="http://cdn.jquerytools.org/1.2.7/tiny/jquery.tools.min.js"></script>
Минимальная разметка:
<div class="scrollable"> <div class="items"> <a href="images/01.jpg" target="_blank"><img src="images/01-thumb.jpg" alt="" /></a> <a href="images/02.jpg" target="_blank"><img src="images/02-thumb.jpg" alt="" /></a> <a href="images/03.jpg" target="_blank"><img src="images/03-thumb.jpg" alt="" /></a> <a href="images/04.jpg" target="_blank"><img src="images/04-thumb.jpg" alt="" /></a> <a href="images/05.jpg" target="_blank"><img src="images/05-thumb.jpg" alt="" /></a> ... </div> </div> <input type="button" class="prev" value="← назад"> <input type="button" class="next" value="вперёд →">
С плагином не идёт никаких стилей, их нужно определить самому. Минимальный необходимый набор (без них скрипт работать не будет):
/* стиль для видимой части скроллера */ .scrollable { position: relative; overflow: hidden; width: 440px; height: 155px; } /* стиль враппера со всеми элементами */ .scrollable .items { width: 20000em; position: absolute; }
Ширину и высоту видимой части скроллера можно указать любую, в том числе в процентах.
Последний штрих, это инициализация плагина:
$(function(){ $('.scrollable').scrollable(); });
Пример получившегося скроллера.
Если добавить немного стилей, то можно получить довольно неплохой результат.
Минусы плагина:
- Чтобы указать число элементов, на которые будет производится скролл, нужно изменять html разметку.
- Можно скроллить вплоть до единственного видимого элемента, даже если после него ничего нет.
Комментарии
Не подскажите, как сделать бесконечную прокрутку?
т.е. чтобы после последнего элемента показывался первый;)
circular:true
http://flowplayer.org/tools/scrollable/index.html
Большое спасибо;)
А как автоматическую прокрутку сделать?
http://flowplayer.org/tools/demos/scrollable/plugins/index.html#autoscroll
xandeadx спасибо.
Странно, на отдельной странице всё работает изумительно.. Поставил на страницу с товаром в OpenCart и авто-проктутка опять не работает. Вот трабла, слов нет... )))
У меня ещё вопрос: как сделать пролистывание не на следующую "группу" изображений а на одну? (что бы по нажатию стрелки влево - всё сдвигалось только на одну фотку) Как такое реализовать, подскижи, плиз ))) Уже голова кипит, всё перерыл.. :(
http://flowplayer.org/tools/demos/scrollable/multiple-scrollables.html
а вот если "хайдить" эелементы скролинга, то получаются глюки... (
Подскажите пожалуйста по поводу этого плагина. Есть скроллер. В нем скроллится по одному элементу. И вот нужно чтобы видимому элементу присваивался какой либо класс, а у невидимых элементов этот класс соответственно удалялся. Заранее спасибо
Что-то не работает, даже в примере...
Оставить комментарий