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

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

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

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

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

Великолепный слайдер для сайта

Установка:

В HEAD

Код
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

HTML

Код
<div class="karkas-slayda">
  <div class="pedesamin first active"></div>
  <div class="pedesamin second"></div>
  <div class="pedesamin third"></div>
  <div class="pedesamin fourth"></div>
</div>
<div class="lansuked right"><</div>
<div class="lansuked left">></div>

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;
}

JS

Код
$(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-анимации.

Демонстрация
2021-05-12 Загрузок: 1 Просмотров: 463 Комментарий: (0)

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

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

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

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