КАК СОЗДАТЬ ПРОСТОЙ MULTI-SLIDER
Суть урока создать простой слайдер категорий с
минимальным дизайном и использованием CSS анимации и jQuery. Идея
состоит в том, чтобы элементы скользили последовательно за слайдом в зависимости от направления.
ПОСМОТРЕТЬ
ДЕМО ИСТОЧНИК
СКАЧАТЬ
РАЗМЕТКИ
Для HTML мы будем использовать неупорядоченные списки,
которые будут содержать элементы и навигацию с категорией . Каждый элемент
списка будет иметь ссылку, которая содержит изображение и заголовок .
<div
id="mi-slider" class="mi-slider">
<ul>
<li><a href="#"><img src="images/1.jpg"
alt="img01"><h4>Boots</h4></a></li>
<li><a href="#"><img src="images/2.jpg"
alt="img02"><h4>Oxfords</h4></a></li>
<li><a href="#"><img src="images/3.jpg"
alt="img03"><h4>Loafers</h4></a></li>
<li><a href="#"><img src="images/4.jpg"
alt="img04"><h4>Sneakers</h4></a></li>
</ul>
<ul>
<li><a href="#"><img src="images/5.jpg"
alt="img05"><h4>Belts</h4></a></li>
<li><a href="#"><img src="images/6.jpg"
alt="img06"><h4>Hats &
Caps</h4></a></li>
<li><a href="#"><img src="images/7.jpg"
alt="img07"><h4>Sunglasses</h4></a></li>
<li><a href="#"><img src="images/8.jpg"
alt="img08"><h4>Scarves</h4></a></li>
</ul>
<ul>
<li><a href="#"><img src="images/9.jpg"
alt="img09"><h4>Casual</h4></a></li>
<li><a href="#"><img src="images/10.jpg"
alt="img10"><h4>Luxury</h4></a></li>
<li><a href="#"><img src="images/11.jpg"
alt="img11"><h4>Sport</h4></a></li>
</ul>
<ul>
<li><a href="#"><img src="images/12.jpg"
alt="img12"><h4>Carry-Ons</h4></a></li>
<li><a href="#"><img src="images/13.jpg"
alt="img13"><h4>Duffel Bags</h4></a></li>
<li><a href="#"><img src="images/14.jpg"
alt="img14"><h4>Laptop Bags</h4></a></li>
<li><a href="#"><img src="images/15.jpg"
alt="img15"><h4>Briefcases</h4></a></li>
</ul>
<nav>
<a href="#">Shoes</a>
<a href="#">Accessories</a>
<a href="#">Watches</a>
<a href="#">Bags</a>
</nav>
</div>
Давайте посмотрим на стиль.
CSS
Обратите внимание, что CSS не будет содержать префиксы, но
вы найдете их в файлах.
Что мы хотим сделать, заключается в следующем: когда
мы нажимаем на ссылку навигации элементы будут двигаться справа или
слева, в зависимости от текущей позиции .
Давайте сначала создадим оболочку стиля, которая является
подразделением с классом mi-slider . Он будет определенной
высоты, которая нам нужна для того, чтобы установить правильнуб позицию:
.mi-slider
{
position: relative;
margin-top: 30px;
height:
490px;
}
Окно будет позиционироваться по центру, это
означает, что все списки будут в одну строку. Помните, мы хотим, чтобы
двигались элементы списка, а не сами списки. Мы устанавливаем
указатель событий нет, чтобы иметь возможность нажимать на ссылки текущего списка:
.mi-slider
ul {
list-style-type: none;
position: absolute;
width: 100%;
left: 0;
bottom: 140px;
overflow: hidden;
text-align: center;
pointer-events:
none;
}
Указатель событий текущего списка должен быть сброшен,
так что бы, содержащие ссылки являлись интерактивными:
.mi-slider
ul.mi-current {
pointer-events:
auto;
}
Когда JavaScript выключен, мы ничего не видем (мы используем
Modernizr):
.no-js
.mi-slider ul {
position: relative;
left: auto;
bottom: auto;
margin:
0;
overflow: visible;
}
Для того, чтобы все элементы списка были в центре, мы
используем ul выравнивания текста по центру, и теперь мы
добавим список элементов встроенный блок с шириной 20%. Эта ширина
гарантирует, что наши изделия вписываются в список.
По умолчанию, все элементы списка будут двигатся с
правой стороны. Мы используем 600%, чтобы переместить их из окна. Мы
добавим немного перехода в непрозрачность:
.mi-slider
ul li {
display: inline-block;
padding: 20px;
width: 20%;
max-width: 300px;
transform: translateX(600%);
transition: opacity 0.2s linear;
}
.no-js
.mi-slider ul li {
transform:
translateX(0);
}
Добавим в стиль содержание элементов списка. Обратите
внимание, мы установили максимальную ширину до 100%. Это
гарантирует, что размещение не нарушает изображение и будет изменяться в
соответствии с их оболочкой:
.mi-slider
ul li a,
.mi-slider
ul li img {
display: block;
margin: 0 auto;
}
.mi-slider
ul li a {
outline: none;
cursor: pointer;
}
.mi-slider
ul li img {
max-width: 100%;
border: none;
}
.mi-slider
ul li h4 {
display: inline-block;
font-family: Baskerville, "Baskerville Old Face", "Hoefler
Text", Garamond, "Times New Roman", serif;
font-style: italic;
font-weight: 400;
font-size: 18px;
padding: 20px 10px 0;
}
При наведении на элемент будем анимировать
непрозрачность элемента списка:
.mi-slider
ul li:hover {
opacity:
0.7;
}
Навигация должна иметь верхнее значение, добавим
боковые края авто и установим максимальную ширину 800px:
.mi-slider
nav {
position: relative;
top: 400px;
text-align: center;
max-width: 800px;
margin: 0 auto;
border-top:
5px solid #333;
}
Мы не хотим, чтобы навигация показывалась на всех
элементах, когда JavaScript включен:
.no-js nav
{
display: none;
}
Ссылки навигации будут иметь собственный стиль и мы добавим
им переход при наведении:
.mi-slider
nav a {
display: inline-block;
text-transform: uppercase;
letter-spacing: 5px;
padding: 40px 30px 30px 34px;
position: relative;
color: #888;
outline: none;
transition: color 0.2s linear;
}
.mi-slider
nav a:hover,
.mi-slider
nav a.mi-selected {
color:
#000;
}
Класс для списков, установим использованием
JavaScript.
Теперь, давайте добавим, стрелки. Мы будем использовать
псевдо-классы: до и: после создания двух треугольников с границами:
.mi-slider
nav a.mi-selected:after,
.mi-slider
nav a.mi-selected:before {
content: '';
position: absolute;
top: -5px;
border: solid transparent;
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.mi-slider
nav a.mi-selected:after {
border-color: transparent;
border-top-color: #fff;
border-width: 20px;
left: 50%;
margin-left: -20px;
}
.mi-slider
nav a.mi-selected:before {
border-color: transparent;
border-top-color: #333;
border-width: 27px;
left: 50%;
margin-left: -27px;
}
Первая анимация, которую мы хотим увидеть, это расширение из
пунктов первого списка. Масштабируемостью анимации будет также включать в себя
пункты которые будут переведены на 0:
.mi-slider ul:first-child
li,
.no-js
.mi-slider ul li {
animation: scaleUp 350ms ease-in-out both;
}
@keyframes
scaleUp {
0% { transform: translateX(0) scale(0); }
100%
{ transform: translateX(0) scale(1); }
}
Давайте добавим различные задержки каждого элемента списка,
так чтобы они появлялись последовательно:
.mi-slider
ul:first-child li:first-child {
animation-delay: 90ms;
}
.mi-slider
ul:first-child li:nth-child(2) {
animation-delay: 180ms;
}
.mi-slider
ul:first-child li:nth-child(3) {
animation-delay: 270ms;
}
.mi-slider
ul:first-child li:nth-child(4) {
animation-delay:
360ms;
}
В нашем примере мы имеем максимум из четырех пунктов,
так что мы определили только четыре задержки. Если у нас будет больше
деталей, то необходимо включать больше.
Для раздвижной анимации мы будем иметь четыре случая: два
для скольжения новых предметов и два для раздвижных из нынешнего элемента, в
зависимости от направления. Итак, мы определили четыре класса для списков,
которые мы будем добавлять с JavaScript:
/*
moveFromRight */
.mi-slider
ul.mi-moveFromRight li {
animation: moveFromRight 350ms ease-in-out both;
}
/*
moveFromLeft */
.mi-slider
ul.mi-moveFromLeft li {
animation: moveFromLeft 350ms ease-in-out both;
}
/*
moveToRight */
.mi-slider
ul.mi-moveToRight li {
animation: moveToRight 350ms ease-in-out both;
}
/*
moveToLeft */
.mi-slider
ul.mi-moveToLeft li {
animation: moveToLeft 350ms ease-in-out both;
}
Теперь нам нужно установить в соответствии анимацией
задержки, которые также зависят от направления. Например, первый пункт будет
скользить в без задержки, если она идет форму в правой части, а также, когда он
выдвигается влево.То же самое будет и для последнего пункта:
.mi-slider
ul.mi-moveToLeft li:first-child,
.mi-slider
ul.mi-moveFromRight li:first-child,
.mi-slider
ul.mi-moveToRight li:nth-child(4),
.mi-slider
ul.mi-moveFromLeft li:nth-child(4) {
animation-delay:
0ms;
}
Увеличение задержки будут установлены соответственно:
.mi-slider
ul.mi-moveToLeft li:nth-child(2),
.mi-slider
ul.mi-moveFromRight li:nth-child(2),
.mi-slider
ul.mi-moveToRight li:nth-child(3),
.mi-slider
ul.mi-moveFromLeft li:nth-child(3) {
-webkit-animation-delay: 90ms;
animation-delay:
90ms;
}
.mi-slider
ul.mi-moveToLeft li:nth-child(3),
.mi-slider
ul.mi-moveFromRight li:nth-child(3),
.mi-slider
ul.mi-moveToRight li:nth-child(2),
.mi-slider
ul.mi-moveFromLeft li:nth-child(2) {
-webkit-animation-delay: 180ms;
animation-delay: 180ms;
}
.mi-slider
ul.mi-moveToLeft li:nth-child(4),
.mi-slider
ul.mi-moveFromRight li:nth-child(4),
.mi-slider
ul.mi-moveToRight li:first-child,
.mi-slider
ul.mi-moveFromLeft li:first-child {
-webkit-animation-delay: 270ms;
animation-delay:
270ms;
}
А теперь давайте определим анимацию для себя. Например,
переход справа будет означать, что мы установим translateXзначение
600% и перейти к 0. Перемещение с левой стороны, мы установим начальное
положение в -600%, так что элементы находятся на левой стороне за пределами
области просмотра. И так далее:
@keyframes
moveFromRight {
0% { transform: translateX(600%); }
100% { transform: translateX(0); }
}
@keyframes
moveFromLeft {
0% { transform: translateX(-600%); }
100% { transform: translateX(0); }
}
@keyframes
moveToRight {
0% { transform: translateX(0%); }
100% { transform: translateX(600%); }
}
@keyframes
moveToLeft {
0%
{ transform: translateX(0%); }
100% { transform: translateX(-600%); }
}
Последнее, но не менее важное, настройка
слайдера контента для небольших экранов.
Начнем с настройки навигации так, чтобы он не ломаются,
когда экран слишком мал:
@media
screen and (max-width: 910px){
.mi-slider nav {
max-width: 90%;
}
.mi-slider nav a {
font-size: 12px;
padding: 40px 10px 30px 14px;
}
}
Так как мы установили фиксированную высоту с ползунком, то
убедимся, что она приспосабливается:
@media
screen and (max-width: 740px){
.mi-slider {
height: 300px;
}
.mi-slider nav {
top:
220px;
}
}
Для устройств действительно с небольшими экранами, мы не
просто хотим сделать слайдер крошечный, но вместо этого мы хотим сделать
навигацию простой для сенсорных устройств. Мы установим все стили таким
образом, чтобы все списки отображались друг под другом:
@media
screen and (max-width: 490px){
.mi-slider {
text-align: center;
height: auto;
}
.mi-slider ul {
position: relative;
display: inline;
bottom: auto;
pointer-events: auto;
}
.mi-slider ul li {
animation: none !important;
transform: translateX(0) !important;
padding: 10px 3px;
min-width: 140px;
}
.mi-slider nav {
display: none;
}
}
И это все, что касается стиля. Теперь давайте
контролировать некоторые вещи с jQuery.
JAVASCRIPT
Давайте создадим простой плагин JQuery для нашего слайдера.
Большая часть работы делается в CSS, где мы определили все анимации. Работа
плагина будет сосредоточена на добавление и удаление классов и контроль
текущей категории. Для браузеров, которые не поддерживают анимацию мы будем
возвращатся к показать / скрыть переход.
Давайте начнем путем кэширования некоторых элементов и
инициализировать несколько переменных:
_init :
function( options ) {
// the categories (ul)
this.$categories = this.$el.children( 'ul' );
// the navigation
this.$navcategories = this.$el.find( 'nav > a' );
var animEndEventNames = {
'WebkitAnimation' : 'webkitAnimationEnd',
'OAnimation' : 'oAnimationEnd',
'msAnimation' : 'MSAnimationEnd',
'animation' : 'animationend'
};
// animation end event name
this.animEndEventName = animEndEventNames[ Modernizr.prefixed( 'animation' ) ];
// animations and transforms support
this.support = Modernizr.csstransforms && Modernizr.cssanimations;
// if currently animating
this.isAnimating = false;
// current category
this.current = 0;
var $currcat = this.$categories.eq( 0 );
if( !this.support ) {
this.$categories.hide();
$currcat.show();
}
else {
$currcat.addClass( 'mi-current' );
}
// current nav category
this.$navcategories.eq( 0 ).addClass( 'mi-selected' );
// initialize the events
this._initEvents();
}
Мы будем связывать события щелчка по категории
навигационной ссылки в соответствии с ползунком. Мы предполагаем, что
индекс каждой из которых соответствует индексу соответствующей категории (
названия ). Когда нажата ссылка категории пункты текущей категории выдвигаются
по одному (помните, мы определили задержки анимации в CSS).
_initEvents
: function() {
var self = this;
this.$navcategories.on( 'click.catslider', function() {
self.showCategory( $( this ).index() );
return false;
} );
// reset on window resize..
$( window ).on( 'resize', function() {
self.$categories.removeClass().eq( 0 ).addClass( 'mi-current' );
self.$navcategories.eq( self.current ).removeClass( 'mi-selected' ).end().eq( 0
).addClass( 'mi-selected' );
self.current = 0;
} );
}
showCategory
: function( catidx ) {
if( catidx === this.current || this.isAnimating ) {
return false;
}
this.isAnimating = true;
// update selected navigation
this.$navcategories.eq( this.current ).removeClass( 'mi-selected' ).end().eq(
catidx ).addClass( 'mi-selected' );
var dir = catidx > this.current ? 'right' : 'left',
toClass = dir === 'right' ? 'mi-moveToLeft' : 'mi-moveToRight',
fromClass = dir === 'right' ? 'mi-moveFromRight' : 'mi-moveFromLeft',
// current category
$currcat = this.$categories.eq( this.current ),
// new category
$newcat = this.$categories.eq( catidx ),
$newcatchild = $newcat.children(),
lastEnter = dir === 'right' ? $newcatchild.length - 1 : 0,
self = this;
if( this.support ) {
$currcat.removeClass().addClass( toClass );
setTimeout( function() {
$newcat.removeClass().addClass( fromClass );
$newcatchild.eq( lastEnter ).on( self.animEndEventName, function() {
$( this ).off( self.animEndEventName );
$newcat.addClass( 'mi-current' );
self.current = catidx;
var $this = $( this );
// solve chrome bug
self.forceRedraw( $this.get(0) );
self.isAnimating = false;
} );
}, $newcatchild.length * 90 );
}
else {
$currcat.hide();
$newcat.show();
this.current = catidx;
this.isAnimating
= false;
}
}
Я надеюсь, вам понравился этот урок
Найти
этот проект на Github
ПОСМОТРЕТЬ
ДЕМО
ИСТОЧНИК
СКАЧАТЬ
Ссылка
на источник
| 
