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 nav
      .carousel-3d nav button

      Ставим:

      .carousel-3d nav button {
      	position: absolute;
      	z-index: 10;
      	top: 50%;
      	left: 10px;
      	cursor: pointer;
      	color: #337AB7;
      	background: #BFE2FF;
      	border: 1px solid #337AB7;
      	padding: 5px 10px;
      	font-weight: bold;
      	transition: all .3s ease;
      }
      .carousel-3d nav button.next {
      	left: auto;
      	right: 10px;
      }
      Ответить
      • Андрей:

        Огромное спасибо

        Ответить
  • PiVirus:

    Приветствую! Не пробовал повернуть карусель, сделать ее не горизонтальной а вертикальной, и прокручивалась вверх или вниз? Или это реализовано и я слепой? :))

    Ответить
  • Алексей:

    Подскажите, как сделать чтобы карусель начинала показ не с первой картинки. Если указать currImage то получается автопрокрутка до элемента, можно сделать без прокрутки, чтобы сразу показывался указанный элемент.

    Ответить
    • Alexander:

      А не проще ли поставить нужную картинку первой? 🙂

      Ответить
      • Алексей:

        У меня идет генерация элементов в зависимости от полученного контента. И если я нахожусь на n-ой позиции и произошло обновление то происходит прокрутка с 0 эл. до n элемента на котором я находился.

        Ответить
        • Alexander:

          Ну это уже смотреть надо и пробовать.
          У автора этой карусели не написано?
          Там отличная статья с примерами и т.д.

          Ответить
        • Alexander:

          Если правильно понял, то убираем из стилей

          transition: -webkit-transform 0.5s;
          transition: transform 0.5s;
          transition: transform 0.5s, -webkit-transform 0.5s;

          В скриптах ставим:

          currImage = 5;

          И добавляем внимацию поворота по клику ( function onClick(e) )

          document.querySelector(".carousel-3d figure").style.transition = "transform 0.5s";
          Ответить
      • Алексей:

        Сделал карусель ((( а на мобильном не работает центр вращения передняя картинка

        Ответить
  • Дмитрий:

    Замечательная штука. Подскажите, а как сделать зум картинки при клике? пытался посмотреть в исходниках https://codepen.io/dudleystorey/pen/sntEk но к сожалению здесь было переделано в div'ы, так что не получается переделать, знаний не хватает((((

    Ответить
    • Alexander:

      Так я тут и менял как раз для зума такого 🙂
      Подключайте любую модальную галерею, например, fancybox и прописывайте ссылку.

      Итого будет:

      <div><a data-fancybox="gallery" href="/photo-big-1.jpg"><img src="photo-1.jpg" alt=""/></a></div>

      Для других гелерей соотв. как то иначае

      Ответить
      • Дмитрий:

        fancybox это конечно крутая штука, но слишком нагружать тоже не очень хочется, поэтому я хотел чисто что бы зум был, просто при клике картинка на 15-20% увеличивалась. Здесь 3D Gallery II человек делает через css и меняет класс у картинки в целом c current на focus, соответственно она увеличивается в зависимости от css, а подключать отдельную галерею, имею такую крутую карусель не хотелось бы. плюс у вас в коде каждой фотке уже проставлена ссылка как #any, вот я и думал что возможно можно сделать так же, через изменения стиля и чисто небольшой зум) а не целая галерея)) в любом случае спасибо, я еще покумекаю как это лучше провернуть, и если не получится, тогда буду цеплять целую галерею (что не оч хотелось бы(( )

        Ответить
        • Alexander:

          Ну там другой человек делает и это другое решение.
          Я, например, не понимаю зачем увеличивать фото на 10-20% и мое решение иное.

          Ответить
          • Дмитрий:

            То что вы сделали, это действительно круто, и большое спасибо)))
            эту карусель я использую для блока с отзывами из инстаграма. там все фото это скрины с телефона (пока добавил ~50, буду менять каждый месяц наверное, так то их больше), они все вертикальные, а делать слишком большим блок не хочется, и сделал его в 330px, из за этого не на всех фотографиях видно что пишут люди, в итоге рационально использование зумирования при клике, не намного, но так что бы человек смог прочитать отзыв реального человека. в итоге не додумался как сделать, и подключил как вы и предлагали FANCYBOX )))

            Ответить
  • Евгения:

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

    Ответить
    • 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 секунды

      Ответить
      • М.:

        Крутится как вентилятор

        Ответить