КАК СОЗДАТЬ ПРОСТОЙ 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

ПОСМОТРЕТЬ ДЕМО                  ИСТОЧНИК СКАЧАТЬ

Ссылка на источник