Создаем слайдшоу с помощью jmpress.js

Мы хотим показать вам сегодня, как использовать замечательный плагин jmpress.js для создания слайд-шоу с 3D-эффектами. Значки, используемые в демо от Artcore Illustration, и используются они по Creative Commons BY-NC-ND 3.0 license.

Итак, давайте начнем!

HTML-разметка

У нас будет один главный контейнер с классом jms-slideshow. Внутри, у нас будет несколько подразделов с классом step. Это будут наши слайды. Каждый шаг или слайд получит класс data-color, он нужен за определения цвета фона и некоторых атрибутов данных от jmpress.js. Вы можете найти все (встроенные) опции здесь: jmpress.js Documentation – Options. Мы будем использовать некоторые атрибуты для того, чтобы определить позицию и вращение слайдов в 3D-пространстве:

<section id="jms-slideshow" class="jms-slideshow">

    <div class="step" data-color="color-1">
        <div class="jms-content">
            <h3>Some headline</h3>
            <p>Some text</p>
            <a class="jms-link" href="#">Read more</a>
        </div>
        <img src="images/1.png" />
    </div>

    <div class="step" data-color="color-2" data-y="500" data-scale="0.4" data-rotate-x="30">
        <!-- ... -->
    </div>

    <!-- ... -->

</section>

Теперь займемся стилями.

CSS

Мы зададим ширину основного контейнера в процентах, при этом определим минимальные и максимальные значения:

.jms-slideshow {
    position: relative;
    width: 80%;
    max-width: 1400px;
    min-width: 640px;
    margin: 20px auto;
    height: 460px;
}

Следующий блок-обертка будет добавлен динамически, и это будет видимая оболочка слайд-шоу:

.jms-wrapper {
    width: auto;
    min-width: 600px;
    height: 440px;
    background-color: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
    -webkit-background-clip: padding;
    -moz-background-clip: padding;
    background-clip: padding-box;
    border: 10px solid #fff;
    border: 10px solid rgba(255, 255, 255, 0.9);
    outline: none;
    transition: background-color 1s linear;
}

Классы для фона будут применяться к предыдущему блоку-обертке. Класс определяется в атрибуте данных data-color на каждом шаге. Это дает нам возможность добавить цвет фона для каждого слайда и изменить его при переходе.

.color-1 {
    background-color: #E3D8FF;
    background-color: rgba(227, 216, 268, 1);
}
.color-2 {
    background-color: #EBBBBC;
    background-color: rgba(235, 187, 188, 1);
}
.color-3 {
    background-color: #EED9C0;
    background-color: rgba(238, 217, 192, 1);
}
.color-4 {
    background-color: #DFEBB1;
    background-color: rgba(223, 235, 177, 1);
}
.color-5{
    background-color: #C1E6E5;
    background-color: rgba(193, 230, 229, 1);
}

Шаги или слайды будут иметь следующие стили:

.step {
    width: 900px;
    height: 420px;
    display: block;
    transition: opacity 1s;
}
.step:not(.active) {
    opacity: 0;
}

Неактивные шаги будут иметь прозрачность равную 0. Когда слайды перемещаются, прозрачность будет установлена равной 1.

Внутренние части слайда будут иметь следующие стили:

.jms-content{
    margin: 0px 370px 0px 20px;
    position: relative;
    clear: both;
}
.step h3{
    color: #fff;
    font-size: 52px;
    font-weight: bold;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
    margin: 0;
    padding: 60px 0 10px 0;
}
.step p {
    color: #fff;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
    font-size: 34px;
    font-weight: normal;
    position: relative;
    margin: 0;
}

Ссылка  "Читать далее" будет иметь небольшую анимацию: как только шаг становится активным, она будет двигаться вверх и появляться:

a.jms-link {
    color: #fff;
    text-transform: uppercase;
    background: linear-gradient(top, #969696 0%,#727272 100%);
    padding: 8px 15px;
    display: inline-block;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
    border: 1px solid #444;
    border-radius: 4px;
    opacity: 1;
    margin-top: 40px;
    clear: both;
    transition: all 0.4s ease-in-out 1s;
}
.step:not(.active) a.jms-link {
    opacity: 0;
    margin-top: 80px;
}

Изображение будет позиционироваться абсолютно на правой стороне каждого слайда:

.step img {
    position: absolute;
    right: 0px;
    top: 30px;
}

Навигация в виде точек будет располагаться в нижней части:

.jms-dots {
    width: 100%;
    position: absolute;
    text-align: center;
    left: 0px;
    bottom: 20px;
    z-index: 2000;
    user-select: none;
}

Тег span будет в виде темной маленькой точки:

.jms-dots span {
    display: inline-block;
    position: relative;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #777;
    margin: 3px;
    cursor: pointer;
    box-shadow:
    1px 1px 1px rgba(0,0,0,0.1) inset,
    1px 1px 1px rgba(255,255,255,0.3);
}

С помощью псевдо-класса :after, активный пункт навигации будет выглядеть как маленькая белая точка:

.jms-dots span.jms-dots-current:after {
    content: '';
    width: 8px;
    height: 8px;
    position: absolute;
    top: 2px;
    left: 2px;
    border-radius: 50%;
    background: linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%);
}

Стрелки навигации будут расположены на левой и на правой стороне слайд-шоу. Мы будем использовать фоновые изображения для стрелок:

.jms-arrows {
    user-select: none;
}
.jms-arrows span {
    position: absolute;
    top: 50%;
    margin-top: -40px;
    height: 80px;
    width: 30px;
    cursor: pointer;
    z-index: 2000;
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1);
    border-radius: 3px;
}
.jms-arrows span.jms-arrows-prev {
    background: #fff url(../images/arrow_left.png) no-repeat 50% 50%;
    left: -10px;
}
.jms-arrows span.jms-arrows-next {
    background: #fff url(../images/arrow_right.png) no-repeat 50% 50%;
    right: -10px;
}

Со стилями мы разобрались, теперь давайте перейдем к JavaScript!

JavaScript

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

Мы создадим jQuery плагин для слайд-шоу. Мы можем вызвать плагин следующим образом:

$('#jms-slider').jmslideshow();

Параметры для плагина jmpress определяются как параметры по умолчанию в нашего плагина:

jmpressOpts : {
    // set the viewport
    viewPort : {
        height : 400,
        width : 1300,
        maxScale : 1
    },
    fullscreen : false,
    hash : { use : false },
    mouse : { clickSelects : false },
    keyboard : { use : false },
    animation : { transitionDuration : '1s' }
},

Вы можете изменить их в плагине слайд-шоу, или передать определенное значение при инициализации плагина. В качестве примера:

// specify the jmpress options
var jmpressOpts = {
    animation : { transitionDuration : '0.8s' }
};

// call the jmslideshow plugin
$('#jms-slideshow').jmslideshow($.extend(true, {jmpressOpts : jmpressOpts}, {
    autoplay : true,
    bgColorSpeed : '0.8s',
    arrows : false
}));

Ниже приводится набор доступных параметров, которые можно использовать для слайд-шоу:

$.JMSlideshow.defaults = {
    // options for the jmpress plugin.
    // you can add more options...
    jmpressOpts : {
        // set the viewport
        viewPort : {
            height : 400,
            width : 1300,
            maxScale : 1
        },
        fullscreen : false,
        hash : { use : false },
        mouse : { clickSelects : false },
        keyboard : { use : false },
        animation : { transitionDuration : '1s' }
    },
    // for this specific plugin we will have the following options:
    // скрыть/показать стрелки навигации
    arrows : true,
    // скрыть/показать навигацию на слайдах в виде точек
    dots : true,
    // скорость анимации фона
    bgColorSpeed : '1s',
    // автопроигрывание слайд шоу
    autoplay : false,
    // время между переходами для слайд шоу
    interval : 3500
};

После того, как плагин слайд-шоу вызывается, первая функция, которая выполняется - это функция инициализации:

_init : function( options ) {
    this.options = $.extend( true, {}, $.JMSlideshow.defaults, options );

    // the slides
    this.$slides = $('#jms-slider').children('div');
    // total number of slides
    this.slidesCount = this.$slides.length;
    // step's bgcolor
    this.colors = $.map( this.$slides, function( el, i ) { return $( el ).data( 'color' ); } ).join( ' ' );
    // build the necessary structure to run jmpress
    this._layout();
    // initialize the jmpress plugin
    this._initImpress();
    // if support (function implemented in jmpress plugin)
    if ( this.support ) {
        // load some events
        this._loadEvents();
        // if autoplay is true start the slideshow
        if( this.options.autoplay ) {
            this._startSlideshow();
        }
    }
},

В функции _layout мы создаем необходимые структуры для плагин jmpress. Кроме того, мы будем добавлять стрелки/точки навигации в случае, если они устанавлены как true в настройках.

_layout : function() {
    // adds a specific class to each one of the steps
    this.$slides.each( function( i ) {
        $(this).addClass( 'jmstep' + ( i + 1 ) );
    } );
    // wrap the slides. This wrapper will be the element on which we will call the jmpress plugin
    this.$jmsWrapper    = this.$slides.wrapAll( '<div class="jms-wrapper"/>' ).parent();
    // transition speed for the wrapper bgcolor
    this.$jmsWrapper.css( {
        '-webkit-transition-duration' : this.options.bgColorSpeed,
        '-moz-transition-duration' : this.options.bgColorSpeed,
        '-ms-transition-duration' : this.options.bgColorSpeed,
        '-o-transition-duration' : this.options.bgColorSpeed,
        'transition-duration' : this.options.bgColorSpeed
    } );
    // добавляем стрелки навигации
    if ( this.options.arrows ) {
        this.$arrows = $( '<nav class="jms-arrows"/>' );
        if( this.slidesCount > 1 ) {
            this.$arrowPrev = $( '<span class="jms-arrows-prev"/>' ).appendTo( this.$arrows );
            this.$arrowNext = $( '<span class="jms-arrows-next"/>' ).appendTo( this.$arrows );
        }
        this.$el.append( this.$arrows )
    }
    // добавляем навигацию в виде точек
    if ( this.options.dots ) {
        this.$dots = $( '<nav class="jms-dots"/>' );
        for( var i = this.slidesCount + 1; --i; ) {
            this.$dots.append( ( i === this.slidesCount ) ? '<span class="jms-dots-current"/>' : '<span/>' );
        }
        if( this.options.jmpressOpts.start ) {
            this.$start = this.$jmsWrapper.find( this.options.jmpressOpts.start ), idxSelected = 0;
            ( this.$start.length ) ? idxSelected = this.$start.index() : this.options.jmpressOpts.start = null;
            this.$dots.children().removeClass( 'jms-dots-current' ).eq( idxSelected ).addClass( 'jms-dots-current' );
        }
        this.$el.append( this.$dots )
    }
}

Мы будем инициализировать плагин jmpress в функции _initImpress. Мы также будем переопределять метод "setActive" для переключения активных пунктов навигации.

_initImpress : function() {
    var _self = this;

    this.$jmsWrapper.jmpress( this.options.jmpressOpts );
    // check if supported (function from jmpress.js):
    // it adds the class not-suported to the wrapper
    this.support = !this.$jmsWrapper.hasClass( 'not-supported' );

    // if not supported remove unnecessary elements
    if ( !this.support ) {
        if ( this.$arrows ) {
            this.$arrows.remove();
        }
        if ( this.$dots ) {
            this.$dots.remove();
        }
        return false;
    }
    // redefine the jmpress setActive method
    this.$jmsWrapper.jmpress( 'setActive', function( slide, eventData ) {
        // change the pagination dot active class
        if ( _self.options.dots ) {
            // adds the current class to the current dot/page
            _self.$dots
            .children()
            .removeClass( 'jms-dots-current' )
            .eq( slide.index() )
            .addClass( 'jms-dots-current' );
        }
        // delete all current bg colors
        this.removeClass( _self.colors );
        // add bg color class
        this.addClass( slide.data( 'color' ) );
    } );
    // add step's bg color to the wrapper
    this.$jmsWrapper.addClass( this.$jmsWrapper.jmpress('active').data( 'color' ) );
},

_startSlideshow и _stopSlideshow будут запускать и останавливать слайд-шоу соответственно, если параметр autoplay установлен true.

// start slideshow if autoplay is true
_startSlideshow : function() {
    var _self = this;
    this.slideshow = setTimeout( function() {
        _self.$jmsWrapper.jmpress( 'next' );
        if ( _self.options.autoplay ) {
            _self._startSlideshow();
        }
    }, this.options.interval );
},
// stops the slideshow
_stopSlideshow : function() {
    if ( this.options.autoplay ) {
        clearTimeout( this.slideshow );
        this.options.autoplay   = false;
    }
},

В конце, мы загружаем события для навигации. Событие touchend уже определено в плагине jmpress, но мы должны остановить слайд-шоу, в случае, если это событие происходит:

_loadEvents : function() {
    var _self = this;

    // navigation arrows
    if ( this.$arrowPrev && this.$arrowNext ) {
        this.$arrowPrev.on( 'click.jmslideshow', function( event ) {
            _self._stopSlideshow();
            _self.$jmsWrapper.jmpress( 'prev' );

            return false;
        } );
        this.$arrowNext.on( 'click.jmslideshow', function( event ) {
            _self._stopSlideshow();
            _self.$jmsWrapper.jmpress( 'next' );
            return false;
        } );
    }

    // navigation dots
    if ( this.$dots ) {
        this.$dots.children().on( 'click.jmslideshow', function( event ) {
            _self._stopSlideshow();
            _self.$jmsWrapper.jmpress( 'goTo', '.jmstep' + ( $(this).index() + 1 ) );
            return false;
        } );
    }
    // the touchend event is already defined in the jmpress plugin.
    // we just need to make sure the slideshow stops if the event is triggered
    this.$jmsWrapper.on( 'touchend.jmslideshow', function() {
        _self._stopSlideshow();
    } );
}

Вот и всё! Я надеюсь, вам понравился этот урок и будет вам полезен!

Перевод статьи с tympanus.net/codrops