ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » 3D слайдер (карусель) для сайта на jQuery

3D слайдер (карусель) для сайта на jQuery

3D слайдер (карусель) для сайта на jQuery
Прекрасно адаптивный под разные размеры монитора и мобильных экранов, где присутствует возможность для автоматического масштабирования, который идеально подходит для корректного отображения контента. Если говорить о карусели, то функция очень гибкая, которая отлично настраивается практически все, если говорить про траектории движения различных объектов.

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

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

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



Останется только задать движение по одну или совершенно другую сторону.

Наглядные примеры:

Вид из трех фотографии:

Легкий jQuery 3D слайдер изображений с эффектом карусели

Здесь вид представлен на шесть фото:

3D слайдер с переходами картинок на CSS

Все увеличиваем, где уже десять фотографий:

Красивые слайдеры и слайд-шоу

Аналогично с 10 картинками, только плюс промежуток 20px:

3D Карусель (слайдер) сменой изображений

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

Слайдер с CSS3 переходами и ключевыми кадрами анимации

Приступаем к установке:

HTML

Код
<div class="kusinebec-domespace">
  <figure>
  <div><a href="/"><img src="Ссылка на изображение/800x533" alt=""></a></div>
  <div><a href="/"><img src="Ссылка на изображение/800x533" alt=""></a></div>
  <div><a href="/"><img src="Ссылка на изображение/800x533" alt=""></a></div>
  </figure>
  <nav>
  <button class="nav prev">Назад</button>
  <button class="nav next">Вперед</button>
  </nav>
</div>

CSS

Код
.kusinebec-domespace {
  padding: 20px;
  -webkit-perspective: 495px;
  perspective: 595px;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}
.kusinebec-domespace > * {
  flex: 0 0 auto;
}
.kusinebec-domespace figure {
  margin: 0;
  width: 50%;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  transition: -webkit-transform 0.7s;
  transition: transform 0.7s;
  transition: transform 0.7s, -webkit-transform 0.7s;
}
.kusinebec-domespace figure img,
.kusinebec-domespace figure div {
  width: 100%;
  box-sizing: border-box;
  padding: 0;
}
.kusinebec-domespace figure div:not(:first-of-type),
.kusinebec-domespace figure img:not(:first-of-type) {
  position: absolute;
  left: 0;
  top: 0;
}
.kusinebec-domespace nav {
  display: flex;
  justify-content: center;
  margin: 15px 0 0;
}
.kusinebec-domespace nav button {
  flex: 0 0 auto;
  margin: 0 4px;
  cursor: pointer;
  color: #19619e;
  background: #b8daf7;
  border: 1px solid #175d98;
  padding: 7px 23px;
  font-weight: bold;
  transition: all .3s ease;
  border-radius: 3px;
}
.kusinebec-domespace nav button:hover {
  color: #f1f1f1;
  background: #236dad;
}

JS

Код
window.addEventListener("load", () => {
  var carousels = document.querySelectorAll(".kusinebec-domespace");
  for (var i = 0; i < carousels.length; i++) {
  carousel(carousels[i]);
  }
});
function carousel(root) {
  var figure = root.querySelector("figure"),
  nav = root.querySelector("nav"),
  images = figure.children,
  n = images.length,
  gap = root.dataset.gap || 0,
  bfc = "bfc" in root.dataset,
  theta = 2 * Math.PI / n,
  currImage = 0;
  setupCarousel(n, parseFloat(getComputedStyle(images[0]).width));
  window.addEventListener("resize", () => {
  setupCarousel(n, parseFloat(getComputedStyle(images[0]).width));
  });
  setupNavigation();
  function setupCarousel(n, s) {
  var apothem = s / (2 * Math.tan(Math.PI / n));
  figure.style.transformOrigin = `50% 50% ${-apothem}px`;
  for (var i = 0; i < n; i++) images[i].style.padding = `0 ${gap}px`;
  for (i = 0; i < n; i++) {
  images[i].style.transformOrigin = `50% 50% ${-apothem}px`;
  images[i].style.transform = `rotateY(${i * theta}rad)`;
  }
  if (bfc)
  for (i = 0; i < n; i++) images[i].style.backfaceVisibility = "hidden";
  rotateCarousel(currImage);
  }
  function setupNavigation() {
  nav.addEventListener("click", onClick, true);
  function onClick(e) {
  e.stopPropagation();
  var t = e.target;
  if (t.tagName.toUpperCase() != "BUTTON") return;
  if (t.classList.contains("next")) {
  currImage++;
  } else {
  currImage--;
  }
  rotateCarousel(currImage);
  }
  }
  function rotateCarousel(imageIndex) {
  figure.style.transform = `rotateY(${imageIndex * -theta}rad)`;
  }
}

Чтоб создать промежуток между снимками, то нужно использовать атрибут data-gap.

Наглядный например:

Код
<div class="kusinebec-domespace" data-gap="20">

Задается расстояние 20px:

Также скрываем тыловые картинки, здесь уже задействуем атрибут data-bfc.

Код
<div class="kusinebec-domespace" data-bfc>

На представленный формат идет также файл, но вся установка находится на странице.

Демонстрация
Источник: www.sitepoint.com

3D Карусель: навигация при помощи SCSS


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



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

Демонстрация
2019-01-16 Загрузок: 3 Просмотров: 2676 Комментарий: (6)

Поделиться в социальных сетях

Материал разместил

Оставь свой отзыв

Комментарий: 6
programistgraf
programistgraf 2019-04-03 15:431
0
Здравствуйте, а как сделать чтобы спереди было видно задние стенки слайдера. И чтобы по краям тоже было видно что там что то есть.
Kosten
Kosten 2019-04-03 16:282
0
Перейдите на демо страницу, там как раз показан тот вариант, где задний план картинки по сторонам видно.
waak
waak 2019-04-03 17:163
0
А смысл? если задние картинки маленькие!
Вы наверное хотите сделать так как в приложениях что бы вид был
Пример вида



Для этого нужно использовать другой слайдер
-SAM-
-SAM- 2019-04-04 21:274
0
Кстати, интересный слайдер. Можно попробовать его приспособить для таблицы с категориями сайта (блоки идут с картинкой категории, её описанием и количеством материалов в ней). Таким образом будет компактный вывод информации по месту.
Kosten
Kosten 2019-04-04 22:225
0
Но он и весит хорошо, что для категорий это будет как то не по рангу, а затея прекрасная, если категорий вывести под изображение, где то жаже встречал на современных сайтах, типа официальных ресурсах.
-SAM-
-SAM- 2019-04-05 01:526
+1
Ну, это как мысли в слух от меня были. Конечно соглашусь, что в большинстве случаев установка слайдера себя не оправдывает в том плане, что подгружается оно скриптом (как дополнительная нагрузка функционала, что когда нецелесообразно - лучше не подключать вовсе).

avatar