Автор

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

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

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


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

Анимация с поддержкой CSS, которая заменяет обновление страницы при обновлении контента с помощью jQuery.


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

В передыдущем уроке «Интересные кнопки поделиться в соцсетях на CSS3» я уже писал как можно сделать красивые кнопки для соцсетей. Продолжая эту тему хочу поделиться еще одним примером как можно оформить свой сайт! В данном примере используется только CSS и не каких скриптов!


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

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


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close