Веб-дизайнеру
Веб-разработчику
Дополнительно
Простой резиновый jQuery слайдер товаров для интернет магазина
Скачать
Демо
↓ Также Вам будет интересно ↓
В сегодняшнем уроке мы хотим показать вам, как создать простой jQuery слайдер с CSS и анимацией. Идея была навеяна от Applle, где несколько маленьких элементов будут “летать” с анимацией подпрыгивания. Мы хотели, чтобы перевести эту концепцию современного вида для интернет магазина с минимально практичным дизайном, где элементы представляют собой различные товары или категории. Ещё также приглашаю посмотреть слайдер контента jquery с автоматической прокруткой. Итак, давайте начнем!
HTML каркас
Для HTML мы будем использовать обычные списки. Каждый элемент списка будет иметь ссылку, которая содержит изображение и заголовок h4.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<div id="mi-slider" class="mi-slider"> <ul> <li><a href="#"><img src="/web-developer/jquery/images/1.jpg" alt="img01"><h4>Ботинки</h4></a></li> <li><a href="#"><img src="/web-developer/jquery/images/2.jpg" alt="img02"><h4>Школьные</h4></a></li> <li><a href="#"><img src="/web-developer/jquery/images/3.jpg" alt="img03"><h4>Мокасины</h4></a></li> <li><a href="#"><img src="/web-developer/jquery/images/4.jpg" alt="img04"><h4>Кроссовки</h4></a></li> </ul> <ul> <li><a href="#"><img src="/web-developer/jquery/images/5.jpg" alt="img05"><h4>Ремни</h4></a></li> <li><a href="#"><img src="/web-developer/jquery/images/6.jpg" alt="img06"><h4>Шляпы & Шапки</h4></a></li> <li><a href="#"><img src="/web-developer/jquery/images/7.jpg" alt="img07"><h4>Темные очки</h4></a></li> <li><a href="#"><img src="/web-developer/jquery/images/8.jpg" alt="img08"><h4>Шарфы</h4></a></li> </ul> <ul> <li><a href="#"><img src="/web-developer/jquery/images/9.jpg" alt="img09"><h4>Другое</h4></a></li> <li><a href="#"><img src="/web-developer/jquery/images/10.jpg" alt="img10"><h4>Luxury</h4></a></li> <li><a href="#"><img src="/web-developer/jquery/images/11.jpg" alt="img11"><h4>Спорт</h4></a></li> </ul> <ul> <li><a href="#"><img src="/web-developer/jquery/images/12.jpg" alt="img12"><h4>Ручной-клади</h4></a></li> <li><a href="#"><img src="/web-developer/jquery/images/13.jpg" alt="img13"><h4>Вещевые сумки</h4></a></li> <li><a href="#"><img src="/web-developer/jquery/images/14.jpg" alt="img14"><h4>Сумки для ноутбуков</h4></a></li> <li><a href="#"><img src="/web-developer/jquery/images/15.jpg" alt="img15"><h4>Портфели</h4></a></li> </ul> <nav> <a href="#">Обувь</a> <a href="#">Аксессуары</a> <a href="#">Часы</a> <a href="#">Сумки</a> </nav> </div> |
Все, теперь перейдем к стилям! 
CSS стили
Обратите внимание, что CSS не будет содержать префиксы, но вы найдете их в исходных файлах.
Что мы сделаем: сначала мы просто хотим сделать чтобы, первый элемент списка был показан пользователю, в то время как все остальные будут находиться за пределами области просмотра. Когда мы нажимаем на ссылку навигации, элементы будут либо задвигаться либо выдвигаться справа или слева, в зависимости от текущей позиции, на которой мы находимся.
Давайте сначала стилизуем обертку, с классом mi-slider. Она будет иметь определенной высоты, которая нам нужна для того, чтобы правильно установить положение ul:
|
1 2 3 4 5 |
.mi-slider { position: relative; margin-top: 30px; height: 490px; } |
Списки ul будут позиционированы абсолютно, что означает все списки будут один на одном. Помните, мы хотим, передвигать только элементы списка, а не сами списки. Мы устанавливаем pointer-events:none, потому что мы хотим иметь возможность нажимать на ссылки текущего списка:
|
1 2 3 4 5 6 7 8 9 10 |
.mi-slider ul { list-style-type: none; position: absolute; width: 100%; left: 0; bottom: 140px; overflow: hidden; text-align: center; pointer-events: none; } |
Pointer-events для текущего списка должны быть сброшены, так что, содержание ссылки будет интерактивным:
|
1 2 3 |
.mi-slider ul.mi-current { pointer-events: auto; } |
Когда JavaScript выключен, мы ничего ничего не смотрим (мы используем Modernizr):
|
1 2 3 4 5 6 7 |
.no-js .mi-slider ul { position: relative; left: auto; bottom: auto; margin: 0; overflow: visible; } |
Чтобы сделать все элементы списка по центру, мы задаем для ul выравнивание текста text-align center, а также добавляем элементов списка inline-block display с шириной 20%. Эта ширина гарантирует, что наши товары впишутся в общую ширину слайдера.
По умолчанию, все элементы списка будут “уходить” с правой стороны. Мы используем 600% здесь, потому что это достаточная величина чтобы переместить их из окна. Мы также добавим немного прозрачность (opacity):
|
1 2 3 4 5 6 7 8 |
.mi-slider ul li { display: inline-block; padding: 20px; width: 20%; max-width: 300px; transform: translateX(600%); transition: opacity 0.2s linear; } |
А также без JS:
|
1 2 3 |
.no-js .mi-slider ul li { transform: translateX(0); } |
Давайте теперь стилизуем содержимое элементов списка. Обратите внимание, что мы установили максимальную ширину (max-width) для изображений до 100%. Это гарантирует, что их расположение не будет нарушено, но изображения будут изменяться в соответствии с их оберткой, которая является нашим li с процентом на основе ширины:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
.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; |
При наведении, мы будем анимировать непрозрачность элемента списка:
|
1 2 3 |
.mi-slider ul li:hover { opacity: 0.7; } |
Навигация должна быть в верху, потому что списки расположены абсолютно (absolution). Мы расположим навигационные ссылки по центру, добавив боковой margin: auto, а также установим максимальную ширину 800px:
|
1 2 3 4 5 6 7 8 |
.mi-slider nav { position: relative; top: 400px; text-align: center; max-width: 800px; margin: 0 auto; border-top: 5px solid #333; } |
Мы не хотим, показывать навигацию везде, если нет JavaScript:
|
1 2 3 |
.no-js nav { display: none; } |
Навигационные ссылки будут иметь хороший отступ (padding) и мы добавим им прозрачность (opacity) при наведения:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.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; } |
Класс mi-selected и mi-current класс списков, мы будем устанавливать с помощью JavaScript.
Теперь, давайте добавим маленькую стрелочку. Мы будем использовать псевдо-классы :before и :after после создания двух треугольников с границами:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
.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; } |
Скучный урок получился, но мы добрались к самому интересному – анимации.
|
1 2 3 4 5 6 7 8 9 |
.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); } } |
Давайте добавим различные задержки каждого элемента списка, чтобы они появлялись последовательно:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.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; } |
В нашем примере мы добавили максимум 4 товара, поэтому задали 4 задержки. Если у вас будет больше товаров, то необходимо добавить больше задержек, для плавности слайдера.
Для раздвижной анимации мы будем иметь четыре класса: два для скольжения новых предметов и два для раздвижных из нынешнего элемена, в зависимости от направления. Итак, мы определили четыре класса для списков, которые мы будем добавлять с JavaScript:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
/* 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; } |
Теперь нам нужно установить в соответствии c анимацией задержки, которые также зависят от направления движения. Например, первый пункт будет скользить без задержки, если он выдвигается вправо или влево. То же самое будет логично и для последнего пункта:
|
1 2 3 4 5 6 |
.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; } |
Увеличивание задержки будет установлено соответственно:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
.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%, так что элементы с левой стороны будут за пределами видимости. И так далее:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
@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%); } } |
Последнее, но не менее важное, это настройка слайдера для небольших экранов с маленьким разрешением.
Начнем с настройки навигации так, чтобы она не “сыпалась”, когда экран слишком мал:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
@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; } } |
Для действительно небольших экранов, мы не будем делать все супер крошечным, но вместо этого мы хотим сделать навигацию простой для сенсорных устройств. Таким образом, мы просто показываем все категорий. Мы установим все стили таким образом, чтобы ничто не скрывалось, и все списки отображались друг за другом:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
@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, где мы определили все анимации. Плагин будет в основном сосредоточен на добавлении и удалении классов и контроль над текущим товаром, которые показывается. Для браузеров, которые не поддерживают анимацию, мы определим простой показ.
Давайте начнем с кэширования некоторых элементов и инициализируем несколько переменных:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
_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(); } |
Мы будем связывать товары в соответствии с навигационными ссылками и ползунком. Мы предполагаем, что индекс каждой соответствует индексу соответствующей категории (ul). При нажатии на другую категорию, текущая “вылетает” (настройки анимации мы установили с помощью CSS):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
_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; } } |
И вот у нас все получилось и мы создали слайдер товаров! Я надеюсь этот урок был Вам полезен!
Данный урок подготовлен для вас командой сайта vladmaxi.net
Источник урока:
Перевел: Владислав Бондаренко
Добрый день!
Слайдер очень понравился и захотел прикрутить его к интернет магазину на Prestashop, но вот вопрос – А как администрировать такой слайд?
Моно ли его прикрутить к какой-либо категории, чтобы он автоматически выводил товар из нее?
Или все нужно делать ручками?
/
Здравствуйте, Олег! Данный слайдер изначально не предусматривает администрирование через какую-либо CMS, поэтому его нужно дорабатывать. Думаю, вам стоит обратиться в веб-студию или написать на фрилансе, где с радостью всё сделают. Желаю успехов!
http://s1109885.storeland.ru/ @
Отличный слайдер, но вот почему то сам слайдер отображается а перехода между категориями нет((. Т.е он просто стоит на первой категории (Ботинки) и все. Если не трудно, можете подсказать почему?
Спасибо.
@
Все, решено