Слайдер carouFredSel. Использование произвольных элементов управления

Недавно передо мной была поставлена задача сверстать дизайн, где на главной странице было целых три слайдера, у всех совершенно разное оформление кнопок «Вперёд» и «Назад». Естественно, мне не хотелось искать три разных скрипта. Немного поискав в интернете, я нашёл почти идеальный скрипт под эту задачу: этот jQuery carouFredSel 6.2.1

Этот скрипт позволяет организовать как традиционный слайдер, так и карусель. Ещё одной его особенностью, которая как раз мне пришлась особенно кстати, является то, что данный скрипт не навязывает разработчику свои элементы управления. Напротив, вы можете задать ему, какие именно элементы вашей вёрстки будут использоваться для переключения слайдов.

На сайте представлена достаточно обширная документация. Скрипт имеет небольшое количество основных, и огромное количество дополнительных настроек. Использование скрипта достаточно традиционно. Сначала необходимо подключить jQuery и данный скрипт:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script>
<script src="jquery.carouFredSel.js" type="text/javascript"></script>

Базовая вёрстка также вряд-ли вас удивит, если вы уже имели дело со слайдерами:

<div id="carousel">
    <img src="img1.jpg" width="300" />
    <img src="img2.jpg" width="300" />
    <img src="img3.jpg" width="300" />
    <img src="img4.jpg" width="300" />
</div>

Вместо изображений можно также использовать html-код, как это показано на базовой странице документации:

<div id="carousel">
    <div>
        <h3>Infinity</h3>
        <p>A concept that in many fields refers to a quantity without bound or end.</p>
    </div>
    <div>
        <h3>Circular journey</h3>
        <p>An excursion in which the final destination is the same as the starting point.</p>
    </div>
    <div>
        <h3>jQuery</h3>
        <p>jQuery  is a cross-browser JavaScript library designed to simplify the client-side scripting.</p>
    </div>
</div>

Ну и для инициализации скрипта используется традиционный javascript-код:

$(document).ready(function() {
    // Using default configuration
    $('#carousel').carouFredSel();

    // Using custom configuration
    $('#carousel').carouFredSel({
        items               : 2,
        direction           : "up",
        scroll : {
            items           : 1,
            easing          : "elastic",
            duration        : 1000,
            pauseOnHover    : true
        }
    });
});

Основные настройки скрипта таковы:

$('#carousel').carouFredSel({
    circular: true,         // Определяет, должен ли быть слайдер круговым
                            // (честно говоря, мне не удалось добиться его корректной
                            // работы с включённой этой опцией)
    infinite: true,         // Определяет, должен ли быть слайдер (карусель) бесконечным.
                            // Если true после последнего элемента слайдер будет переходить на первый
    responsive: false,      // Определяет, будут ли элементы карусели растянуты или сжаты под её размеры
    direction: "left",      // Направления прокрутки: "right", "left", "up" or "down".
    width: null,            // Ширина карусели. Может быть null (ширина будет расчитана), числом,
                            // "variable" (размеры карусели будут автоматически изменяться при прокрутке элементов с переменной шириной),
                            //  "auto" (ширина будет как у самого широкого элемента) или в процентах, например "100%" (только для горизонтальных каруселей)
    height: null,           // Высота (аналогично параметру width, только для вертикального измерения)
    align: "center",        // Как будут выравниваться элементы внтури фиксированной ширины/высоты: "center", "left", "right" or false.
    padding: null,          // Отстувы карусели (верхний, правый, нижний и левый). Например: [10, 20, 30, 40]
    synchronise: null,      // Позволяет нескольким каруселям работать синхронно:
                            // [string selector, boolean inheritOptions, boolean sameDirection, number deviation] For example: ["#foo2", true, true, 0]
    cookie: false,          // Позволяет запоминать текущее положение карусели в куках. Можно задать имя переменной cookie
    onCreate: null          // Фунция, вызываемая после создания объекта карусели
});

Из многочисленных дополнительных параметров меня заинтересовал параметр auto, который позволяет отключить или включить автоматическое перелистование кадров. Ну, и кончено самое вкусное — параметры prev и next. В них можно запросто задать те элементы, которые вы хотите использовать в качестве прокрутки. Они могут быть расположены где угодно — но задав этот параметр, вы автоматом определите действие скроллера по щелчку на них. Параметр items определяет количество одновременно отображаемых элементов карусели. Для демонстрации я приведу несколько упрощённый фрагмент из моей вёрстки:

<div class='buttons'>
    <div class="left" id="cl_left">
    </div>
    <div class='right' id="cl_right">
    </div>
    <div class='clear'></div>
</div>
<ul class='slider'>
    <li><img src='/images/image1.png'></li>
    <li><img src='/images/image2.png'></li>
    <li><img src='/images/image3.png'></li>
    <li><img src='/images/image4.png'></li>
    <li><img src='/images/image5.png'></li>
</ul>
$(function () {
    $('ul.slider').carouFredSel({
            items               : 4,
            direction           : "left",
            auto                : {play: false},
             prev                : "#cl_left",
            next                : "#cl_right",
            circular            : false,
            infinite            : true,
    });
});

7 комментариев

    • А собственно, в чём проблема сделать два таких слайдера? Я и пять делал. Делаете описанные команды столько раз, сколько нужно. Естественно, элементы для управления указываете для каждой копии свои.

        • Почему не будет?
          Так же как и сам слайдер, его элементы будут во всех слайдерах помещены. А если этот слайдер не кустарный какого-нибудь недоучки, все управляющие элементы должны проходить через THIS, указывая на конкретный слайдер, разве нет? это и логично и правильно. Следовательно каждый элемент уникальный в понимании javascript.
          Сам пока не пробовал, делаю по старому — каждый в отдельном объявлении.
          Но доля правды есть, Михаил…таким способом все слайдеры будут однотипные, а обычно, когда нужно несколько слайдеров, они разные как визуально, так и технически (где-то 3 слайда, где-то 1 на всю ширину). В таком случае выше предложенный вариант совсем не вариант. Честно сказать, у меня ещё не было заказов с использованием нескольких однотипных слайдеров, все всегда разные )))

        • Не то же, Андрей, абсолютно.
          Применяя к классу вы лишь вешаете действия на все слайдеры страницы одновременно, нажатие на стрелку любого слайдера активирует их ВСЕ.
          Выше вашего — только тот ответ верный. (this) указывает на конкретный элемент в наборе, то есть тот, над которым было совершено действие.

Добавить комментарий

Ваш e-mail не будет опубликован.