xandeadx.ru Блог музицирующего веб-девелопера

Javascript → jQuery Tools Scrollable — лёгкий скроллер контента

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

Хочу рассказать о лёгком jQuery скроллере (слайдер? карусель?) jQuery Tools Scrollable.

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 разметку.
  • Можно скроллить вплоть до единственного видимого элемента, даже если после него ничего нет.
Похожие записи

Комментарии RSS

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

Большое спасибо;)

А как автоматическую прокрутку сделать?

xandeadx спасибо.
Странно, на отдельной странице всё работает изумительно.. Поставил на страницу с товаром в OpenCart и авто-проктутка опять не работает. Вот трабла, слов нет... )))
У меня ещё вопрос: как сделать пролистывание не на следующую "группу" изображений а на одну? (что бы по нажатию стрелки влево - всё сдвигалось только на одну фотку) Как такое реализовать, подскижи, плиз ))) Уже голова кипит, всё перерыл.. :(

а вот если "хайдить" эелементы скролинга, то получаются глюки... (

Подскажите пожалуйста по поводу этого плагина. Есть скроллер. В нем скроллится по одному элементу. И вот нужно чтобы видимому элементу присваивался какой либо класс, а у невидимых элементов этот класс соответственно удалялся. Заранее спасибо

Оставить комментарий

Содержимое этого поля является приватным и не будет отображаться публично. Если у вас есть аккаунт в Gravatar, привязанный к этому e-mail адресу, то он будет использован для отображения аватара.
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Доступные HTML теги: <a> <i> <b> <strong> <code> <ul> <ol> <li> <blockquote> <em> <s>
  • Строки и параграфы переносятся автоматически.
  • Подсветка кода осуществляется с помощью тегов: <code>, <css>, <html>, <ini>, <javascript>, <sql>, <php>. Поддерживаемые стили выделения кода: <foo>, [foo].

Подробнее о форматировании