ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » Адаптивный слайдер для 3D показа изображений

Адаптивный слайдер для 3D показа изображений

Вашему вниманию адаптивный слайдер с показом изображений в 3D формате, который используем jQuery, где идет красивый переход из плоского вида в 3D. Идеально подойдет на многие тематики, что отражает показ фотографий высокого разрешения. Если многие привыкли к смене изображений, где основном проходит вся функция в плоской форме. То здесь намного грандиознее, ведь сам снимок идет в развороте, что в дальнейшем автоматически переходит в плоский формат. Это все выглядит оригинально, где-то изначально даже не привычно.

Такой стиль слайда отлично наблюдать на главной страницы, где будет вверх, который и займет его полностью каркас с изображениями. Как можно заметить, что явной изюминкой данного слайдера безусловно становится 3d эффект изображений при показе, но больше при визуально просматривается при перелистывании. Здесь не нужно гадать, что карусель, как функция отсутствует, просто бы не так сильно смотрелось, что при желании можно его подключить., но лучше все оставить по умолчанию.

Также как у многих, здесь присутствуют переключатели, которые только расположены по сторонам. Что отлично, но главное корректно идет отображение из на мобильных аппаратах, или на малых и больших экранов.

Установка:

В HEAD

Код

HTML

Код

CSS

Код

.karkas-slayda {
  perspective: 1000px;
  transform-style: preserve-3d;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.pedesamin {
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease-out;
  transform-origin: 50% 50% -50vw;
  transform: rotateY(-90deg);
  position: absolute;
  left: 0;
  top: 0;
  backface-visibility: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.pedesamin.active {
  transform: rotateY(0deg);
}

.pedesamin.active ~ .pedesamin {
  transform: rotateY(90deg);
}

.pedesamin.first {
  background-image: url('Здесь ссылка на изображение №1');
}

.pedesamin.second {
  background-image: url('Здесь ссылка на изображение №2');
}

.pedesamin.third {
  background-image: url('Здесь ссылка на изображение №3');
}

.pedesamin.fourth{
  background-image: url('Здесь ссылка на изображение №4');
}

.lansuked {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  z-index: 2;
  width: 80px;
  height: 80px;
  font-size: 80px;
  font-weight: bold;
  color: #fff;
  cursor: pointer;
}

.lansuked.right {
  margin-left: 30px;
}

.lansuked.left {
  right: 0;
}

Код

$(document).ready(function() {
  var currentSlide = 0,
  $slide = $('.pedesamin'),
  allSlides = $slide.length,
  $arrow = $('.lansuked'),
  $arrowRight = $('.lansuked.right'),
  $arrowLeft = $('.lansuked.left'),
  $active = $('.karkas-slayda'),
  $active = $('.active');

  function selectSlide(number) {
  $slide.removeClass('active');
  $slide.eq(number).addClass('active');
  }

  function selectNextSlide() {
  if (currentSlide === allSlides - 2) {
  $slide.first().insertAfter($slide.last());
  $slide = $('.pedesamin');
  selectSlide(currentSlide);
  } else {
  var nextSlide = (currentSlide + 1) % allSlides;
  currentSlide = nextSlide;
  selectSlide(currentSlide);
  }
  }

  function selectPreviousSlide() {
  if (currentSlide === 1) {
  $slide.last().insertBefore($slide.first());
  $slide = $('.pedesamin');
  selectSlide(currentSlide);
  } else {
  var previousSlide = (currentSlide - 1 + allSlides) % allSlides;
  currentSlide = previousSlide;
  selectSlide(currentSlide);
  }
  }

  $arrowRight.on('click', selectPreviousSlide);
  $arrowLeft.on('click', selectNextSlide);

});

Если кратко, то это адаптивный плагин слайдера jQuery в стиле CSS3 3D, вдохновленный потрясающим слайдером целевых страниц. Который может преобразовывать снимки в стиль 3D форму, что в дальнейшем анимировать их с помощью преобразований CSS-анимации.

Демонстрация

12 Мая 2021 Загрузок: 1 Просмотров: 926 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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