Делаем карусель с помощью плагина Any List Scroller

В настоящее время существует огромная куча решений для создания каруселей на JavaScript. Одно из самых простых решений это jQuery плагин Any List Scroller (ALS). Скачать его можно с официального сайта.

Автор . Дата: 31.10.2014

В настоящее время существует огромная куча решений для создания каруселей на JavaScript. Одно из самых простых решений это jQuery плагин Any List Scroller (ALS). Скачать его можно с официального сайта: http://als.musings.it/#downloads

Рассмотрим пример использования плагина. Для того, чтобы начать использовать плагин нужно сначала подключить его и библиотеку jQuery:
 

<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/jquery.als-1.7.min.js"></script>

Теперь нужно создать внешний вид нашей карусели. Сначала должен идти div с id, к которому будет привязана наша инициализация. Внутри этого div'а должны быть кнопки для переключения элементов нашей карусели. Они должны иметь класс als-prev для предыдущего элемента или als-next для следующего. Дальше идет div с классом als-viewport, который описывает окно, в котором мы будем видеть элементы. И внутри него идет либо ul с классом als-wrapper, либо div с таким же классом. А внутри ul или div идут элементы нашей карусели. Для ul это будет li, а для div тоже div блоки с классами als-item.

Пример с ul:

<div id="lista1" class="als-container">
    <span class="als-prev"><img src="images/thin_left_arrow_333.png" alt="prev" title="previous" /></span>
    <div class="als-viewport">
        <ul class="als-wrapper">
            <li class="als-item"><img src="images/als-images/calculator.png" alt="calculator" title="calculator" />calculator</li>
            <li class="als-item"><img src="images/als-images/light_bulb.png" alt="light bulb" title="light bulb" />light bulb</li>
            <li class="als-item"><img src="images/als-images/card.png" alt="card" title="card" />card</li>
            <li class="als-item"><img src="images/als-images/chess.png" alt="chess" title="chess" />chess</li>
            <li class="als-item"><img src="images/als-images/clock.png" alt="alarm clock" title="alarm clock" />alarm clock</li>
            <li class="als-item"><img src="images/als-images/cut.png" alt="scissors" title="scissors" />scissors</li>
            <li class="als-item"><img src="images/als-images/heart.png" alt="heart" title="heart" />heart</li>
        </ul>
    </div>
    <span class="als-next"><img src="images/thin_right_arrow_333.png" alt="next" title="next" /></span>
</div>

Пример с div:

            <div id="lista1" class="als-container">
                <span class="als-prev"><img src="images/thin_top_arrow_333.png" alt="prev" title="previous" /></span>
                <div class="als-viewport">
                    <div class="als-wrapper">
                        <div class="als-item"><img src="images/als-images/calculator.png" alt="calculator" title="calculator" />calculator</div>
                        <div class="als-item"><img src="images/als-images/light_bulb.png" alt="light bulb" title="light bulb" />light bulb</div>
                        <div class="als-item"><img src="images/als-images/card.png" alt="card" title="card" />card</div>
                        <div class="als-item"><img src="images/als-images/chess.png" alt="chess" title="chess" />chess</div>
                        <div class="als-item"><img src="images/als-images/clock.png" alt="alarm clock" title="alarm clock" />alarm clock</div>
                        <div class="als-item"><img src="images/als-images/cut.png" alt="scissors" title="scissors" />scissors</div>
                        <div class="als-item"><img src="images/als-images/heart.png" alt="heart" title="heart" />heart</div>
                    </div>
                </div>
                <span class="als-next"><img src="images/thin_bottom_arrow_333.png" alt="next" title="next" /></span>
            </div>

Затем нам нужно привязать нашу карусель к скрипту:

$(document).ready(function() 
    {
        $("#lista1").als({
        visible_items: 4,
        scrolling_items: 2,
        orientation: "horizontal",
        circular: "yes",
        autoscroll: "no",
        interval: 5000,
        speed: 500,
        easing: "linear",
        direction: "right",
        start_from: 0
    });
});

где:

  • visible_elements - кол-во отображаемых элементов карусели
  • scrolling_items - шаг прокрутки элементов. Например если установлено значение 2, то при каждом шаге прокрутки будет появляться 2 новых и пропадать 2 старых элемента.
  • orientation - ориентация карусели. Принимает значения horizontal или vertical. Т.е. говорит элементам прокручиваться по горизонтали или вертикали.
  • circular - цикличность. Принмает значения yes или no. Если включено, то при приближении к последнему элементу списка элементы пойдут сначала.
  • autoscroll - включает автоматическую прокрутку карусели. Принимает значения yes или no.
  • interval - задает интервал времени, через который будет произведен переход на новый элемент при включенной автопрокрутке. Время задается в миллисекундах.
  • speed - задает время, за которое произойдет смена элемента в миллисекундах.
  • direction - задает направление прокручивания списка. Возможные варианты: left, right, up, down.
  • start_from - задает элемент, с которого список будет отображаться на экране.

Теперь можете запускать и любоваться вашей каруселью. Посмотреть демонстрационный пример можно здесь.


comments powered by HyperComments