3D карусель изображений

Данный вариант карусели не требует каких либо плагинов и занимает всего 2.5кб (CSS + JS)

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

А далее происходит ее движение в одну или другую сторону

Примеры:

3 фотографии:


6 фотографий:


10 фотографий:


10 фотографий с промежутком 20px:


12 фотографий с промежутком 20px и скрытыми задними:

Установка:

HTML:

Для добавления промежутков между фотографиями для блока карусели используется атрибут data-gap, например:

<div class="carousel-3d" data-gap="20"> (расстояние 20 пикселей)

Чтобы скрыть тыловые фотографии используется атрибут data-bfc, например:

<div class="carousel-3d" data-bfc>

CSS:

JavaScript:

Автор карусели и оригинальная статья: Giulio Mainardi

Я лишь обернул фотографии в тег <div></div> для больших возможностей, например, для добавления ссылки или текста на изображение.

Фотографии: kellepics

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

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

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

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

  • Евгения:

    подскажите, как можно изменить размер карусели? сделать ее больше?

    Ответить
    • Alexander:
      .carousel-3d figure {
      	width: 50%;
      }
      Ответить
  • Елена:

    И правда, так и напрашивается (даже в этом логическое завершение карусели) вместо кнопок применить боковые фото для навигации. Все подобные карусели с кнопками. А это было бы ново… Но, код просто ужасно запутанный, чтобы как-то это сделать. Я бы с удовольствием применила с таким вот ноу-хау !

    Ответить
  • Александр:

    Спасибо! Выручили новичка) Просто, удобно и адаптивно. А не подскажите, как реализовать прокрутку при клике на фото, а не по кнопке? Теоретически я понимаю, что нужно получить картинки в переменную, навесить на них прослушивальщик, потом, наверное, запустить rotateCarousel, что-то передав функции в аргументе, но практически не могу пока сообразить, как это состыковать с исходным кодом.

    Ответить
    • Alexander:

      Да нет, зачем так сложно.
      Определить фотку что в центре и на боковые повесить currImage++ и currImage—

      Ответить
    • Alexander:

      А если нужно просто поворачивать карусель по клику по ней, то еще проще, повесьте событие не на кнопку а на нее

      Ответить
  • Татьяна:

    Очень классная карусель. А как ее сделать автоматической, чтобы сама поворачивалась?

    Ответить
    • Alexander:

      Попробуйте ниже функции

      function rotateCarousel(imageIndex) {
      	figure.style.transform = `rotateY(${imageIndex * -theta}rad)`;
      }

      добавить:

      window.setInterval(function() {
      	currImage++;
      	rotateCarousel(currImage);
      }, 2000);

      2000 — это 2 секунды

      Ответить