Автор

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

 

Вот и всё!

Многие материалы на сайте взяты из блогов: "Все для веб-дизайнера Rudebox", "A free library of HTML, CSS, JS nuggets Codyhouse" - полностью переведен и представлен в ознакомительных целях!

vk.com/club.ssdru

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



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

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

Красивый дизайн всегда положительно сказывается на его репутации. Ведь не секрет, если дизайн плох, то и находиться на таком ресурсе не вызывает интереса. Недавно в одном из премиум шаблонов заметил интересное меню, которое отлично вписывается в темный дизайн сайта. Эта навигация весьма привлекательная, и меня она заинтересовала. Одним из преимуществ такого меню является то, что оно написано полностью на css. Идея меню состоит в том, что ползунок, который находиться над верхней частью меню, плавно скользит к активным пунктам навигации.


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

  1. Использовать как часы
  2. Использовать в качестве таймера
  3. Использовать в качестве обратного отсчета
  4. Поддерживает широкий спектр использованием CSS
  5. Аннотация всех используемых объектов
  6. Полнофункциональный API для разработчиков и создания пользовательскогоциферблата

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

Типографика стала играть большую роль в современном веб-дизайнеры. Создавая сайт, мы стали уделять внимание таким мелочам как шрифт и его правильное отображение, некоторые мастера предпочитают репозитории гиганта google со шрифтами, а другие собственные, подключаемые к документу, но можно пойти другим путем, и создать полную анимацию текста, для этого мы будем использовать js. В данном посте мы рассмотрим один из таких примеров. Основная идея состоит в том, что текст состоит из капель, которые можно двигать, а они будут разлетаться.


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

В наше время технологии для веб-мастеров быстро развиваются, предоставляя нам новые и все интересные возможности разработки новых креативных идей с помощью технологий  HTML 5,  jQuery и плагина Quicksand. Данное портфолио отлично выглядит и будет работать даже если у посетителя отключен JavaScript, то он все равно увидит работы, что благотворно сказывается на SEO сайта. Данное портфолио мозно с легкостью отредактировать под свое усмотрение и добавить в него необходимые элементы..


75 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close