Автор

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

Адаптивный слайдер на 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);
	}
});

Примечание!

Если вы хотите анимировать слайдер автоматически, добавьте класс .autoplay в элемент ul.cd-hero-slider.

 

Вот и всё!


vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru


Статьи по темеjQuery

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

Места на сайте не бывает много, его необходимо экономить, и организовывать на сайте все таким образом, чтобы на сайте оставалось достаточно места, и взор пользователя не терялся в поисках информации. Некоторые сайты предлагаю просмотреть свои популярные статьи, или последние которые были добавлены на сайт, обычно это выводиться простым списком, под статьей, который не особо бросается в глаза. В данном уроке мы рассмотрим простой анимированный скроллер новостей сайта с помощью xml.


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

Удобный фрагмент, позволяющий пользователям настраивать продукт непосредственно из галереи продуктов и добавлять его в корзину.


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

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


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

Эта ссылка «Back to top» позволяет пользователям плавно перемещаться вверх по странице. Это небольшая деталь, которая улучшает навигацию на веб-сайте с длинными страницами.


105 Публикаций

Раскрутка в соцсетях

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


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close