Слайдер 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,
});
});
