Создаем простую карусель (слайдер) с помощью jQuery

рисованная карусельДоброго времени суток, дорогие читатели. Простите, что так редко пишу в блог. Времени мало еще и лень докучает. Эту статью я планировал написать еще в январе 2015 года, но у меня не получилось. Сегодня я расскажу вам как создать простую карусель (слайдер) с помощью jQuery. Карусели бывают разные, но речь в статье пойдет именно о карусели фотографий. Хотя, полученные знания можно применить к чему угодно и сделать хоть карусель каруселей. Статья ориентирована на новичков. Кому интересно прошу под кат.

По сути, карусель отличается от слайдера только тем, что слайдер показывает в конкретный момент времени только один элемент списка, а карусель несколько. Хотя многие люди воспринимают и карусель и слайдер как один и тот же элемент интерфейса, только с разным дизайном. Мы будем делать карусель. Но полученные знания можно будет применить для создания слайдера. Хочу напомнить, что статья ориентирована на новичков и ее цель показать принцип работы и внутреннее устройство карусели/слайдера. В реальных проектах лучше использовать готовые решения (возможно собственной разработки), чем писать все самому. Хотя иногда и это имеет смысл.

Для начала создадим обычный документ html. Назовем его index.html:

Теперь нам нужно создать структуру самой карусели. Пускай каждый элемент нашей jQuery карусели будет состоять из картинки и небольшого текста. Как-то так:

Приведем немного нашу карусель в порядок простым CSS кодом. Для этого подключим сам CSS файл:

Потом допишем классы к нашим элементам:

И теперь самое главное, сам CSS код:

Ничего не обычного. Зато страничка приобрела нормальный вид:

первые шаги к созданию jQuery слайдераСейчас наша будущая карусель похожа на простой список. Что бы она стала похожа на карусель, нужно завернуть ее в дополнительный блок (div), который скроет часть элементов. Этот блок я называю хайдер. Добавим его в html:

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

А так же добавим код для хайдера:

Теперь получилось вот так:

создаем простой jQuery слайдерКак видите, теперь часть элементов просто скрыта. Теперь нам нужно добавить элементы прокрутки. Это могут быть картинки (обычно стрелки) или просто текст. Мы добавим обычный текст. Для этого в html добавим строчки кода с нашими элементами управления:

А после поправим CSS, что бы элементы управления каруселью нормально отобразились. Теперь весь CSS код будет выглядеть так:

Мы добавили атрибут float для элементов управления и самого хайдера. Кому-то может показаться странным зачем нужен floar со значением left для правого элемента управления. Дело в том, что если ему не задать float, он будет растягиваться на всю ширину пространства. В дальнейшем, когда мы захотим приукрасить элементы управления, это будет нам мешать.
Таким образом страница стала выглядеть вот так:

корявый слайдер

Как видите, есть лишнее пространство между левым элементом управления и хайдером. Кроме того, ширина хайдера рвет последний элемент блока. Что бы хайдер не рвал элементы, его ширина должна быть равна суммарной ширине всех видимых элементов списка. В нашей случае видимых элементов списка 5. Ширина каждого элемента 100 пикселей (по ширине картинки установленной в css), но еще у каждого элемента есть отступ в 25 пикселей с права. Его тоже нужно учесть. Но отступ от последнего элемента не нужен, так как там пустое пространство и видимым быть ему не обязательно. Кроме того, если мы в дальнейшем захотим приукрасить наши элементы управления («Влево» и «Вправо») лишний отступ внутри хайдера будет только мешать. Получается что хайдер должен быть шириной в 600 пикселей (я угадал). А лишнее пространство слева — это padding списка. Убираем его:

Получилось вот что:

заготовка для слайдераПриведем в порядок наши элементы управления. Пускай они будут похожи на кнопки:

Ничего особенного. Получилось вот так:

почти готовый слайдерНаконец-то мы подошли к самому интересному. Осталось запрограммировать нашу карусель. Добавим в наш маленький учебный проект два JavaScript файла. Пустой файл slider.js и сам jQuery.js. Я использовал jQuery версии 2.1.3:

Теперь, нам нужно повесить event’ы на наши элементы управления:

Что мы делаем дальше. Теперь, по клику на кнопку «Влево» или на кнопку «Вправо» мы будем изменять позицию нашего списка (ul) с помощью свойства left. В начальной позиции значение свойства left равно 0. Добавим свойство position для нашего списка, оно должно быть со значением relative:

Ширина каждого элемента списка — 125 пикселей, как мы уже посчитали выше. То есть, что бы прокрутить карусель на один элемент вправо, нужно задать значение left списка в -125 пикселей. А если мы хотим прокрутить влево, то просто 125 пикселей. На JS мы будем при каждом клике либо добавлять либо отнимать 125 пикселей. Для анимации прокручивания мы будем использовать функцию jquery — animate(..). Первые ее аргумент это массив параметров css для анимации, второй время анимации, третий callback (функция, которая выполниться после анимации). Получается вот так:

На этом описание как создать самую простую карусель — заканчивается. Но в этой карусели есть баг. Если постоянно нажимать на кнопки — карусель будет постоянно прокручиваться. Даже если элементов уже нет, смещение списка будет происходить. Мы можем избежать этого. Если смещение равно 0, то кнопка «Влево» не должна срабатывать. Аналогично и для кнопки «Вправо». Добавим это в код:

Ну вот и все. Задавайте- свои вопросы.

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

  • Опишите логические действия в последних ваших изменениях, что конкретно означают добавленные вами события и для чего они служат последний раздел — «Но в этой карусели есть баг»

  • не плохо было бы готовую карусель выложить для скачивания

  • Почему не работает скрипт?

  • Делал себе на сайт портфолио карусель, и столкнулся с такой же проблемкой. Ваш вариант работает, сам так сделал сначала, но потом, начав адаптировать, столкнулся с еще одним «багом». Область скрывающая карусель, разной длинны на определенных устройствах, и тут уже так решить её не выйдет.

  • Спасибо, очень хорошо все объяснено

  • не плохо было бы циклично сделать

  • В последнем блоке ошибка
    var leftUIEl = $(‘.slider-arrow-left’);
    var rightUIEl = $(‘.slider-arrow-right’);
    var elementsList = $(‘.slider-list’);
    а нужно:
    var leftUIEl = $(‘.carousel-arrow-left’);
    var rightUIEl = $(‘.carousel-arrow-right’);
    var elementsList = $(‘.carousel-list’);

    2 часа над этим просидел)

  • Эмм… Не понял, почему-то не отправилось сообщение… Еще раз…

    Я хотел спросить, можно ли сделать так, что бы на одной странице работало несколько каруселей, при этом не переписывая код под каждую? Как бы унифицировать код.

  • не до конца понимаю логику 9й строки в последнем скрине. minimumOffset — по идее константа, так как длинна elementsCount = elementsList.find(‘li’).length — тоже не меняется от кликов. Итого, как может выполняться условие в 20й строке: if (currentLeftValue != minimumOffset) ??? оно ведь никогда и не будет выполняться, а значит смещение вправо будет происходить пока не пролистаем 10000рх.. Можете подробнее объяснить этот момент?

  • Уже разобрался. Спасибо за статью!

  • Хорошо бы модернизировать скрипт, чтобы можно было несколько каруселей на одной странице размешать, не зная наперед сколько их будет. Если число каруселей статично, то можно просто разные переменные для хранения данных использовать.

  • Спасибо чувак, все работает. Правда немного адаптировал скрипт, чтобы можно было вешать его на все карусели!

  • //Циклично

    $(document).ready(function() {
    var leftUIEl = $(‘.carousel-arrow-left’);
    var rightUIEl = $(‘.carousel-arrow-right’);
    var elementsList = $(‘.carousel-list’);

    var pixelsOffset = 125;
    var currentLeftValue = 0;
    var elementsCount = elementsList.find(‘li’).length;
    var minimumOffset = — ((elementsCount — 5) * pixelsOffset);
    var maximumOffset = 0;

    leftUIEl.click(function() {
    if (currentLeftValue != maximumOffset) {
    currentLeftValue += 125;
    elementsList.animate({ left : currentLeftValue + «px»}, 500);
    } else {
    currentLeftValue = minimumOffset;
    elementsList.animate({ left : currentLeftValue + «px»}, 500);
    }
    });

    rightUIEl.click(function() {
    if (currentLeftValue != minimumOffset) {
    currentLeftValue -= 125;
    elementsList.animate({ left : currentLeftValue + «px»}, 500);
    } else {
    currentLeftValue = 0;
    elementsList.animate({ left : currentLeftValue + «px»}, 500);
    }
    });

    });

  • ЭТО НЕ КАРУСЕЛЬ С*** БЛ***

  • А как сделать авто прокрутку карусели

  • Циклично не работает. всё перепробовал выше.
    Адаптации под мобильную версию нет.

    А вот автоповорот работает с этим кодом:
    $(document).ready(function() {
    setInterval(function () {document.getElementById(«right»).click();}, 1000);
    });

    где 1000 это 1 секунда

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *