Нещодавно переді мною була поставлена задача зверстати дизайн, де на головній сторінці було цілих три слайдера, у всіх абсолютно різне оформлення кнопок «Вперед» і «Назад». Природно, мені не хотілося шукати три різних скрипта. Трохи пошукавши в інтернеті, я знайшов майже ідеальний скрипт під цю задачу: цей jQuery carouFredSel 6.2.1
Цей скрипт дозволяє організувати як традиційний слайдер, так і карусель. Ще однією його особливістю, яка як раз мені припала особливо до речі, є те, що даний скрипт не нав'язує розробнику свої елементи управління. Навпаки, ви можете задати йому, які саме елементи вашої верстки будуть використовуватися для перемикання слайдів.
На сайті представлена досить велика документація. Скрипт має невелику кількість основних, і величезна кількість додаткових налаштувань. Використання скрипта досить традиційно. Спочатку необхідно підключити jQuery і даний скрипт:
Базова верстка також навряд-чи вас здивує, якщо ви вже мали справу з слайдерами:
Замість зображень можна також використовувати html-код, як це показано на базовій сторінці документації:
Основні налаштування скрипта такі:
З численних додаткових параметрів мене зацікавив параметр auto, який дозволяє відключити або включити автоматичне перелістованіе кадрів. Ну, і звичайно найсмачніше - параметри prev і next. У них можна запросто поставити ті елементи, які ви хочете використовувати в якості прокрутки. Вони можуть бути розташовані де завгодно - але задавши цей параметр, ви автоматом визначте дію скроллера одним помахом на них. Параметр items визначає кількість одночасно відображуваних елементів каруселі. Для демонстрації я приведу декілька спрощений фрагмент з моєї верстки: