Адаптивный слайдер на jQuery

Полноразмерный, адаптивный и простой в настройке слайдер.

 

ДЕМО

ИСХОДНИКИ

 

Вы пытаетесь показать пользователям столько, сколько максимально вы можете, но вы хотите донести эту информацию организованным и чистым способом. Поэтому мы создали для вас готовый к использованию слайдер jQuery с некоторыми встроенными опциями, такими как фон видео / изображений и различные выравнивания текста. В попытке увеличить взаимодействие с пользователем мы заменили «навигационные стрелки» на кнопки. Разница заключается в следующем: кнопки имеют заголовок, подсказку о том, какой контент ожидать. Стрелки просто говорят пользователям «вы можете переключать слайд».

 

Создание структуры

HTML структурирован в 2 основных элемента: неупорядоченный список ul.cd-hero-slider, содержащий слайды, и div.cd-slider-nav, содержащий навигацию ползунка и маркер span.cd (используемый для создания Маркер выбранного элемента в навигации).

<section class="cd-hero">
 <ul class="cd-hero-slider">
 <li class="selected">
 <div class="cd-full-width">
 <h2><!-- title here --></h2>
 <p><!-- description here --></p>
 <a href="#0" class="cd-btn"><!-- btn text here --></a>
 </div> <!-- .cd-full-width -->
 </li>
 
 <!-- othe slides here -->
 
 </ul> <!-- .cd-hero-slider -->
 
 <div class="cd-slider-nav">
 <nav>
 <span class="cd-marker item-1"></span>
 
 <ul>
 <li class="selected"><a href="#0">Intro</a></li>
 <li><a href="#0">Tech 1</a></li>
 <!-- other navigation items here -->
 </ul>
 </nav> 
 </div> <!-- .cd-slider-nav -->
</section> <!-- .cd-hero -->

 

Добавление стиля

Структура слайдера довольно проста: все слайды переведены вправо, вне окна просмотра translateX (100%); Выбранный класс добавляется в видимый слайд, чтобы переместить его обратно в окно просмотра translateX (0), а класс .move-left используется для перевода слайда влево translateX (-100%).

Для достижения гладкой анимации мы использовали переходы CSS3, применяемые к элементу .selected и .is-moving: при выборе нового слайда класс .is-moving присваивается слайду, движущемуся за пределами области просмотра, в то время как выбранный Класс присваивается выбранному слайду.

.cd-hero-slider li {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: translateX(100%);
}
.cd-hero-slider li.selected {
  /* this is the visible slide */
  position: relative;
  transform: translateX(0);
}
.cd-hero-slider li.move-left {
  /* slide hidden on the left */
  transform: translateX(-100%);
}
.cd-hero-slider li.is-moving, .cd-hero-slider li.selected {
  /* the is-moving class is assigned to the slide which is moving outside the viewport */
  transition: transform 0.5s;
}

О одиночной анимации слайдов: на больших устройствах (ширина видового экрана более 768 пикселей) мы решили оживить эффект входа, оживляя отдельные слайдовые элементы .cd-half-width и .cd-full-width, изменяя их непрозрачность и Преобразовать свойства.

Классы .from-left и .from-right используются для определения того, входит ли выбранный слайд в область просмотра слева или справа, чтобы запускать другую анимацию в соответствии с направлением входа. Чтобы этот эффект работал правильно, мы использовали другое значение задержки анимации для каждого анимированного элемента.

Для элементов .cd-half-width, например:

@media only screen and (min-width: 768px) {
 .cd-hero-slider .cd-half-width {
 opacity: 0;
 transform: translateX(40px);
 }
 .cd-hero-slider .move-left .cd-half-width {
 transform: translateX(-40px);
 }
 .cd-hero-slider .selected .cd-half-width {
 /* this is the visible slide */
 opacity: 1;
 transform: translateX(0);
 }
 .cd-hero-slider .is-moving .cd-half-width {
 /* this is the slide moving outside the viewport 
 wait for the end of the transition on the <li> parent before set opacity to 0 and translate to 40px/-40px */
 transition: opacity 0s 0.5s, transform 0s 0.5s;
 }
 .cd-hero-slider li.selected.from-left .cd-half-width:nth-of-type(2),
 .cd-hero-slider li.selected.from-right .cd-half-width:first-of-type {
 /* this is the selected slide - different animation if it's entering from left or right */
 transition: opacity 0.4s 0.2s, transform 0.5s 0.2s;
 }
 .cd-hero-slider li.selected.from-left .cd-half-width:first-of-type,
 .cd-hero-slider li.selected.from-right .cd-half-width:nth-of-type(2) {
 /* this is the selected slide - different animation if it's entering from left or right */
 transition: opacity 0.4s 0.4s, transform 0.5s 0.4s;
 }
}

 

Обработка событий

Видео, используемое в качестве фона для одного из слайдов, не вставлено непосредственно в HTML, а загружается, только если ширина устройства больше 768 пикселей; Таким образом, видео не будет загружено на мобильные устройства. Видеоданные выбранного слайда используются для извлечения видеоролика. Вы можете сделать то же самое для элементов <img> внутри контейнера .cd-img (который скрыт на мобильных устройствах).

Кроме того, мы использовали jQuery для реализации функциональности слайд-шоу: когда пользователь щелкает один из элементов списка вкладки .cd-slider-nav, мы обнаруживаем позицию выбранного элемента (используя функцию index ()) и обновляем слайдер ( Используя функции nextSlide () или prevSlide () в соответствии с этой позицией) и положение span.cd-marker.

$('.cd-slider-nav li').on('click', function(event){
	event.preventDefault();
	var selectedItem = $(this);
	if(!selectedItem.hasClass('selected')) {
		// if it's not already selected
		var selectedPosition = selectedItem.index(),
			activePosition = $('.cd-hero-slider .selected').index();
		if( activePosition < selectedPosition) {
			nextSlide($('.cd-hero-slider'), $('.cd-slider-nav'), selectedPosition);
		} else {
			prevSlide($('.cd-hero-slider'), $('.cd-slider-nav'), selectedPosition);
		}
		
		updateNavigationMarker(selectedPosition+1);
	}
});

 

Вот и всё!

---