Простейшая круговая карусель элементов jQuery

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

Введение.

Сейчас очень популярны горизонтальные и вертикальные слайдеры и карусели элементов. Существует большое количество готовых библиотек, для реализации каруселей. Но, не так давно, наткнулся на один сайт, где элементы были расположены и переключались по кругу. Для создания круговых каруселей есть готовые 3D библиотеки каруселей, но, они не позволяли реализовать именно то, что хотелось мне, при этом контроль над элементами был практически нулевой, сложно было исправить функционал «под себя».

Как итог, я решил самостоятельно разобраться и сделать подобную карусель элементов. Демонстрацию карусели Вы можете найти по ссылке в конце статьи.

Функционал простой. Заранее предупрежу, что все элементы придется просчитывать и размещать (позиционировать) вручную для каждого размера контента. В качестве еще одного минуса, отмечу, что из-за ручного расчета позиционирования элементов не получится реализовать динамическое изменение количества элементов в карусели.

Как это работает?

Итак, предлагаю разобраться, из чего вообще будет состоять карусель.

Во-первых, Вам необходимо подобрать изображение, которое будет служить основой круговой карусели.

Далее делаем следующую разметку:

Здесь хочу акцентировать внимание на блок <ul class=»circle-container»>…</ul> В нем будут перечисляться наши элементы, их может быть сколько Вам угодно. Этот блок естественно можно сделать через цикл, если Ваши данные берутся из базы или находятся в массиве.

Рекомендую использовать такое количество элементов, чтобы при делении 360 на количество этих элементов, полученное число было без бесконечных дробей, в противном случае карусель в процессе прокрутки будет постепенно смещаться на некоторую погрешность.

Не обращаем внимание на блоки с классом .circle-item-content, в них мы будем хранить заголовки, описания и ссылки на элементы, они никак не будут отображаться, мы их скроем, но, сами значения будем брать для отображения в момент выбора.

Также у нас присутствует блок навигации <div class=»circle-nav»>…</div> — стрелки прокрутки назад и вперед, их можно будет убрать, если они Вам будут не нужны.

И соответственно блок <div class=»circle-content»>…</div> в который мы будем помещать заголовок, описание и ссылку выбранного элемента для отображения, т.е. как раз из блока с классом .circle-item-content каждого элемента.

Оформление.

Структура готова. Теперь необходимо оформить всё содержимое:

Здесь обратите внимание на оформление класса .circle-container, в нем мы как раз указываем изображение, которое будет нашей основой. Изображение желательно иметь равным или больше, чем размер самого блока карусели. Размер блока мы задаем в классе .circle-carousel .container .wraper. У меня размер равен 1000х1000 пикселей (т.к. круговая карусель элементов у нас круглая, поэтому блок должен быть равным по ширине и высоте).

Самое важное в наших стилях, это оформление элементов. Уделите особое внимание оформлению стилей .circle-item:nth-of-type(номер)

Именно здесь Вам необходимо рассчитать и задать позиции для каждого элемента в нашей окружности. У меня 6 элементов, поэтому я также каждый из них поворачиваю на +60 градусов относительно друг друга. Это необходимо для того, чтобы выбранный в конечном итоге при повороте встал на нужный градус. По сути, позиционирование элементов самое сложное во всём процессе создания круговой карусели.

Все остальные стили, это просто оформление, Вы можете крутить их как Вам будет угодно. Я не специалист в оформлении, поэтому у меня всё просто.

Двигатель.

Итак, теперь добавим скрипты, которые будут обрабатывать нашу карусель:

Здесь у нас 4 функции и 3 обработки нажатия (нажатие на кнопки «назад», «вперед» и нажатие на сам элемент):
appendContent(elem) — функция, которая получает заголовок, описание и ссылку элемента и размещать в центральном блоке;
rotateElem(elem) — функция, которая будет поворачивать всю карусель к элементу, на который был произведен клик;
rotatePrev(elem) — функция, которая будет поворачивать карусель на один элемент назад при клике на кнопку «назад»;
rotateNext(elem) — функция, которая будет поворачивать карусель на один элемент вперед при клике на кнопку «вперед».

Скрипт можно даже не трогать, вставить как есть, независимо от количества элементов в структуре карусели, т.к. расчет ведется в функции. Всё что Вам понадобится, это изменить названия классов, в случае, если Вы их изменяли в разметке.

И, не менее важная деталь — не забываем подключить библиотеку jQuery.

Круговая карусель элементов готова.

Демонстрацию и готовый код Вы можете найти по ссылкам в конце статьи. Если у Вас что-то не работает, или остались вопросы, оставляйте в комментариях, будем разбираться вместе.

Touch событие — Swipe для карусели

Этим дополнением я обязан посетителю Amsterdam, который в своём комментарии предложил добавить Touch событие прокрутки карусели на мобильных устройствах с помощью Swipe (листания).

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

Сама по себе мысль о Touch событиях мне понравилась. В одном из заказов мне уже приходилось делать листалку для книги. Для подобных событий есть множество готовых плагинов со своими преимуществами и недостатками. Но для реализации Swipe именно для этой карусели я решил сделать чистым JS.

Для реализации, нам понадобится добавить как минимум две функции — touchstart (начало прикосновения) и touchend (конец прикосновения). Также можно еще добавить touchmove (движение) для плавной прокрутки, но в данной карусели эта функция будет работать не корректно и придется переделывать весь основной код, поэтому я решил ее не использовать.

В Demo мной были добавлены стили для экранов меньше 600px, чтобы можно было протестировать. Для корректного просмотра экран Вашего мобильного устройства должен быть не менее 380px, в противном случае Вам будет мешать горизонтальный скролл. Также можно протестировать с компьютера, включив режим мобильного устройства через консоль браузера.

Итак, просто в общий код добавьте следующий сразу после строчки appendContent($(‘.circle-container .circle-item.selected’));

Здесь в обработке начала прикосновения мы просто сохраняем данные о точке прикосновения, в то время как в конце прикосновения мы выполняем всю работу. После всех расчетов и определения направления движения для упрощения реализации просто вызываем клик на соответствующей стрелке:

  • $(‘.circle-nav .circle-nav-next a’).trigger(‘click’); — вперед
  • $(‘.circle-nav .circle-nav-prev a’).trigger(‘click’); — назад

Если Вы не стали добавлять в свою карусель эти стрелки и в Вашем коде нет фунций их обработки, то просто скопируйте своответствующий код вместо вызова этих триггеров.

В принципе, всё очень просто. Если у Вас остались вопросы, оставляйте их в комментариях.

Хочу отметить, что код тестировался на Android, как обстоят дела с iPhone — не знаю. Если кому-то удастся протестировать на iPhone, очень прошу отписаться в комментариях.

Полезность статьи

Оцените, на сколько полезной оказалась статья.
1 балл2 балла3 балла4 балла5 баллов
4,80 / 5 баллов
5 участников
Комментарии
  • Amsterdam
    Мастерски! Но не хватает одного момента на мой взгляд - возможности крутить ее мышкой. Сейчас этот функционал очень востребован, особенно на планшетах и смартфонах. Будь здесь эта функция, данный образец определенно можно было назвать лучшим ;)
    • Blog About
      Кстати да, Вы правы, не помешает добавить. Возможно, если будет время, попробую что-нибудь придумать и дополнить.
      Спасибо за отзыв.
      • Amsterdam
        С интересом буду следить за доработкой!
        • Blog About
          Добавлены функции обработки Touch событий. Если Вам всё еще интересно, читайте блок статьи "Touch событие — Swipe для карусели".

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

* - поля обязательные для заполнения. E-mail не публикуется.