3D-карусель управляемая мышью

Возможности карусели:

  • Любое количество фотографий.
  • Произвольный радиус.
  • Автоматическое движение с заданной скоростью.
  • Отсутствие дополнительных библиотек.
  • Всего 90 строк кода.

Более подробно о настройках и вариантах карусели описано внизу страницы.

Пример:

Увеличение фотографий в модальных окнах в данное решение не входит и используется только для примера.

HTML:

Количество фотографий может быть любое.

CSS:

JS:

Где:

radius - Радиус карусели

autoRotate - Автоматическое вращение (true / false)

rotateSpeed - Скорость вращения

imgWidth - Ширина фотографии

imgHeight - Высота фотографии


Чтобы карусель вращалась зажатием и движением мыши в любом месте документа, а не только в ее контейнере, нужно заменитьcarousel.onpointerdown = function(e) {...} на document.onpointerdown = function(e) {...}


Если в карусели не используются ссылки, а только фотографии, то:

  • В HTML убираем ссылки
  • В CSS удаляем класс #drag-container img и заменяем #drag-container a на #drag-container img
  • В JS заменяем let aImg = ospin.getElementsByTagName("a"); на let aImg = ospin.getElementsByTagName("img");

У автора сделано одновременно оба варианта (с ссылкой и без), но в этом случае происходит конфликт в Firefox

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


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

Автор: Hoang Tran
3D Carousel на github
Фотографии: kellepics

Смотрите также:

Пошаговый слайдер

Оригинальный слайдер на jQuery, который листает карточки по кругу в одну сторону

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

Ваш комментарий отправлен!

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

  • Юлия:

    у меня не показывает изображения, в чём может быть проблема?

    Ответить
    • Alexander:

      Смотреть нужно, как я угодаю почему 🙂

      Ответить
      • Юлия:

        Можно с Вами по этому вопросу как-то связаться?

        Ответить
  • PiVirus:

    Шикарная карусель! Как всегда контент топовый у тебя 🙂

    Ответить