Используя jmpress, сделаем jquery плагин для создания слайдшоу с интересными 3D эффектами для слайдов.

HTML

У нас будет основной контейнер - <section> с классом jms-slideshow. Внутри будет содержаться несколько дивов с классом step. Это и будут наши слайды. Каждый слайд (div с классом step) получит класс data-color для определения цвета фона и некоторых атрибутов jmpress.js.
Обо всех имеющихся опциях можно почитать тут: http://shama.github.com/jmpress.js/docs/#options.
Мы будем использовать некоторые атрибуты для определения позиции и вращения слайдов в 3D пространстве:

<section id="jms-slideshow" class="jms-slideshow">
 
    <div class="step" data-color="color-1">
        <div class="jms-content">
            <h3>Заголовок</h3>
            <p>Текст</p>
            <a class="jms-link" href="#">Читать далее</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;
}

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

.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;
}

У неактивных слайдов (.step) непрозрачность будет 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;
}

С "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);
}

И используем псевдо-элемент для создания маленькой белой точки:

.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%);
}

Навигационные стрелки (span) будут расположены слевой и справой стороны слайдшоу. Для стрелок будем использовать фоновые изображения:

.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;
}

JS

Подключаем jQuery, jmpress и наш плагин:

<script type="text/jаvascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/jаvascript" src="js/jmpress.min.js"></script>
<script type="text/jаvascript" src="js/jquery.jmslideshow.js"></script>

Для создания нашего сценария мы будем использовать только часть возможностей плагина jmpress, но при желании вы можете использовать и другие. Почитать о всех функциях jmpress можно тут: http://shama.github.com/jmpress.js/
Итак создавать мы будем свой плагин слайдшоу. Вызывать его будем примерно так:

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

Опции для jmpress плагина определены как опции по умолчанию в нашем плагине (заметьте, что вы можете определить больше опций (http://shama.github.com/jmpress.js/docs/#options), чем у нас перечислено.)

jmpressOpts : {
    // установите область просмотра
    viewPort        : {
        height  : 400,
        width   : 1300,
        maxScale: 1
    },
    fullscreen      : false,
    hash            : { use : false },
    mouse           : { clickSelects : false },
    keyboard        : { use : false },
    animation       : { transitionDuration : '1s' }
},

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

Например так:

// опции jmpress
var jmpressOpts = {
    animation       : { transitionDuration : '0.8s' }
};
 
// вызов плагина jmslideshow
$( '#jms-slideshow' ).jmslideshow( $.extend( true, { jmpressOpts : jmpressOpts }, {
    autoplay    : true,
    bgColorSpeed: '0.8s',
    arrows      : false
}));

Далее набор доступных параметров для плагина слайдшоу:

$.JMSlideshow.defaults      = {
    // опции для jmpress плагина.
    // вы можете добавить больше опций...
    jmpressOpts : {
        // установить область просмотра
        viewPort        : {
            height  : 400,
            width   : 1300,
            maxScale: 1
        },
        fullscreen      : false,
        hash            : { use : false },
        mouse           : { clickSelects : false },
        keyboard        : { use : false },
        animation       : { transitionDuration : '1s' }
    },
    // для этого конкретного плагина у нас будут следующие опции:
    // показать/скрыть навигационные стрелки
    arrows      : true,
    // показать/сркыть навигационные точки/страницы
    dots        : true,
    // скорость перехода изменения цвета (bgcolor) для каждого слайда (.step)
    bgColorSpeed: '1s',
    // автопоказ вкл / выкл
    autoplay    : false,
    // время между переходами для слайдшоу
    interval    : 3500
};

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

_init : function( options ) {
 
    this.options        = $.extend( true, {}, $.JMSlideshow.defaults, options );
 
    // слайды
    this.$slides        = $('#jms-slider').children('div');
    // общее количество слайдов
    this.slidesCount    = this.$slides.length;
    // цвет фона bgcolor слайдов
    this.colors         = $.map( this.$slides, function( el, i ) { return $( el ).data( 'color' ); } ).join( ' ' );
    // построение необходимой структуры, чтобы заработал jmpress
    this._layout();
    // инициализация плагина jmpress
    this._initImpress();
    // если поддерживается (функция реализованная в jmpress плагине)
    if( this.support ) {
 
        // загрузка некоторых событий
        this._loadEvents();
        // если автопоказ включен, то начигается слайдшоу
        if( this.options.autoplay ) {
            this._startSlideshow();
        }
    }
},

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

_layout             : function() {
 
    // добавляет определенный класс каждому из шагов (слайдов)
    this.$slides.each( function( i ) {
        $(this).addClass( 'jmstep' + ( i + 1 ) );
    } );
 
    // оболочка слайдов. Эта оболочка будет элементом на котором мы вызовем плагин jmpress
    this.$jmsWrapper    = this.$slides.wrapAll( '<div class="jms-wrapper"/>' ).parent();
 
    // скорость перехода при изменении цвета (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. Также мы переопределим метод jmpress "setActive" для переключения активной навигационной точки.

_initImpress        : function() {
 
    var _self = this;
 
    this.$jmsWrapper.jmpress( this.options.jmpressOpts );
    // проверка если поддерживается (функция из jmpress.js):
    // добавляет класс not-suported для оболочки
    this.support    = !this.$jmsWrapper.hasClass( 'not-supported' );
 
    // если не поддерживается, удаляет ненужные элементы
    if( !this.support ) {
        if( this.$arrows ) {
            this.$arrows.remove();
        }
        if( this.$dots ) {
            this.$dots.remove();
        }
        return false;
    }
 
    // переопределение jmpress метода setActive
    this.$jmsWrapper.jmpress( 'setActive', function( slide, eventData ) {
 
        // change the pagination dot active class
        if( _self.options.dots ) {
 
            // добавление класса current к текущей точке/странице
            _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 запустят и остановят слайдшоу, если опция автопоказа включена в настройках:

// начать слайдшоу, если автопоказ включен
    _startSlideshow     : function() {
        var _self   = this;
        this.slideshow  = setTimeout( function() {
            _self.$jmsWrapper.jmpress( 'next' );
            if( _self.options.autoplay ) {
                _self._startSlideshow();
            } 
        }, this.options.interval );
    },
    // остановить слайдшоу
    _stopSlideshow      : function() {
        if( this.options.autoplay ) {
            clearTimeout( this.slideshow );
            this.options.autoplay   = false;
        }
    },

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

_loadEvents         : function() {
 
    var _self = this;
 
    // навигационные стрелки
    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;
        } );
    }
 
    // навигационные точки
    if( this.$dots ) {
        this.$dots.children().on( 'click.jmslideshow', function( event ) {
            _self._stopSlideshow();
            _self.$jmsWrapper.jmpress( 'goTo', '.jmstep' + ( $(this).index() + 1 ) );
            return false;
        } );
    }
 
    // событие touchend уже определено в плагине jmpress.
    // мы должны удостоввериться в остановке слайдшоу, если событие инициировано
    this.$jmsWrapper.on( 'touchend.jmslideshow', function() {
        _self._stopSlideshow();
    } );
}