Exore LTD » jQuery » Вертикальный слайдер с помощью jQuery и CSS переходами
Лого SiteHere.ru

Октябрь 25, 2019 Запись была обновлена

Время чтения: 3 мин. Прочитать позже

Вертикальный слайдер с помощью jQuery и CSS переходами

Вертикальный слайдер с помощью jQuery и CSS переходами

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

Похожие уроки:

Приступим!

Реальный пример можно увидеть здесь:

Посмотреть примерСкачать




HTML часть

Структура страницы будет следующая:

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

<section id="ps-container" class="ps-container">
    <div class="ps-header">
        <h1>Вертикальный слайдер</h1>
    </div>
    <div class="ps-contentwrapper">
        <div class="ps-content">
            <h2>Bernhard</h2>
            <span class="ps-price">$120</span>
	    <!-- описание -->
        </div>
 
        <div class="ps-content">
            <h2>Tobias</h2>
            <span class="ps-price">$85</span>
	    <!-- описание -->
	</div>			
 
	<div class="ps-content">
            <h2>Pöang</h2>
            <span class="ps-price">$140</span>
	    <!-- описание -->
        </div>
 
        <div class="ps-content">
            <h2>Mellby</h2>
            <span class="ps-price">$195</span>
            <!-- описание -->
        </div>
 
        <div class="ps-content">
            <h2>Torbjörn</h2>
            <span class="ps-price">$30</span>
	    <!-- описание -->
        </div>
    </div>
    <div class="ps-slidewrapper">
        <div class="ps-slides">
            <div style="background-image:url(images/1.jpg);"></div>
            <div style="background-image:url(images/2.jpg);"></div>
            <div style="background-image:url(images/3.jpg);"></div>
            <div style="background-image:url(images/4.jpg);"></div>
            <div style="background-image:url(images/5.jpg);"></div>
        </div>
 
        <nav>
            <a href="#" class="ps-prev" ></a>
            <a href="#" class="ps-next" ></a>
        </nav>
    </div>
</section>


CSS часть

Чтобы использовать иконки, необходимо прописать следующее:

1
2
3
4
5
6
7
8
9
10
11

@font-face {
  font-family: 'icon';
  src: url("font/icon.eot");
  src:
    url("font/icon.eot?#iefix") format('embedded-opentype'),
    url("font/icon.woff") format('woff'),
    url("font/icon.ttf") format('truetype'),
    url("font/icon.svg#icon") format('svg');
  font-weight: normal;
  font-style: normal;
}

Контейнер имеет ширину и высоту 100%, а также абсолютное позиционирование:

1
2
3
4
5
6
7
8
9

.ps-container {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    text-transform: uppercase;
    color: #555;
    background: #fff;
}

Все блоки, которые находятся в главном контейнере также имеют абсолютное позиционирование:

1
2
3
4

.ps-container > div {
    position: absolute;
    width: 50%;
}

Шапка будет иметь высоту 150 пикселей и располагаться слева вверху:

1
2
3
4
5
6
7

.ps-header {
    top: 0px;
    left: 0px;
    height: 150px;
    z-index: 1001;
    background: #fff;
}

Для заголовков задан следующий стиль:

1
2
3
4
5
6
7
8
9

.ps-header h1 {
    color: #ccc;
    line-height: 150px;
    margin: 0;
    padding: 0 50px;
    font-weight: 200;
    font-size: 14px;
    letter-spacing: 10px;
}

А также заданы специальные стили для размера экрана до 860 пикселей, но я не буду здесь их показывать, чтобы страница не была очень длинной.



Javascript

Начнем с определения переменных:

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

var $container = $( '#ps-container' ),
    $contentwrapper = $container.children( 'div.ps-contentwrapper' ),
 
    $items = $contentwrapper.children( 'div.ps-content' ),
    itemsCount = $items.length,
    $slidewrapper = $container.children( 'div.ps-slidewrapper' ),
 
    $slidescontainer = $slidewrapper.find( 'div.ps-slides' ),
    $slides = $slidescontainer.children( 'div' ),
    // стрелки навигации
    $navprev = $slidewrapper.find( 'nav > a.ps-prev' ),
    $navnext = $slidewrapper.find( 'nav > a.ps-next' ),
    // текущий индекс для элементов и слайдов
    current = 0,
    // проверяет выполняется ли сейчас переход
    isAnimating = false,
    // поддержка CSS переходов
    support = Modernizr.csstransitions// transition end event
 
    transEndEventNames = {
        'WebkitTransition' : 'webkitTransitionEnd',
        'MozTransition' : 'transitionend',
        'OTransition' : 'oTransitionEnd',
        'msTransition' : 'MSTransitionEnd',
        'transition' : 'transitionend'
    };

Когда вызывается функция init(), первое что необходимо сделать это показать первый элемент и соответствующее изображение на фоне навигации:

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

init = function() {
    var $currentItem = $items.eq( current ),
        $currentSlide = $slides.eq( current ),
        initCSS = {
            top : 0,
            zIndex : 999
        };
 
    $currentItem.css( initCSS );
    $currentSlide.css( initCSS );
 
    updateNavImages();
    initEvents();
},
updateNavImages = function() {
    var configPrev = ( current > 0 ) ? $slides.eq( current - 1 ).css( 'background-image' ) : $slides.eq( itemsCount - 1 ).css( 'background-image' ),
        configNext = ( current < itemsCount - 1 ) ? $slides.eq( current + 1 ).css( 'background-image' ) : $slides.eq( 0 ).css( 'background-image' );
 
    $navprev.css( 'background-image', configPrev );
    $navnext.css( 'background-image', configNext );
 
},
adjustLayout = function() {
    $container.css( 'height', $window.height() );
},

Далее определяем событие, которое происходит при клике:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

initEvents = function() {
    $navprev.on( 'click', function( event ) {
        if( !isAnimating ) {
            slide( 'prev' );
        }
        return false;
    } );
 
    $navnext.on( 'click', function( event ) {
        if( !isAnimating ) {
            slide( 'next' );
        }
        return false;
    } );
 
    $items.on( transEndEventName, removeTransition );
    $slides.on( transEndEventName, removeTransition );
 
},

Основная функция — это функция slide(). Идея такая, что следующий или предыдущий слайд появляется снизу или сверху, а также обновляем изображение, которое находится на фоне стрелок навигации:

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

slide = function( dir ) {
    isAnimating = true;
 
    var $currentItem = $items.eq( current ),
        $currentSlide = $slides.eq( current );
 
    if( dir === 'next' ) {
        ( current < itemsCount - 1 ) ? ++current : current = 0;
    }
    else if( dir === 'prev' ) {
        ( current > 0 ) ? --current : current = itemsCount - 1;
    }
 
    var $newItem = $items.eq( current ),
        $newSlide = $slides.eq( current );
 
    $newItem.css( {
        top : ( dir === 'next' ) ? '-100%' : '100%',
        zIndex : 999
    } );
 
    $newSlide.css( {
        top : ( dir === 'next' ) ? '100%' : '-100%',
        zIndex : 999
    } );
 
    setTimeout( function() {
        $currentItem.addClass( 'ps-move' ).css( {
            top : ( dir === 'next' ) ? '100%' : '-100%',
            zIndex : 1
        } );
 
        $currentSlide.addClass( 'ps-move' ).css( {
            top : ( dir === 'next' ) ? '-100%' : '100%',
            zIndex : 1
        } );
 
        $newItem.addClass( 'ps-move' ).css( 'top', 0 );
        $newSlide.addClass( 'ps-move' ).css( 'top', 0 );
 
        if( !support ) {
            isAnimating = false;
        }
    }, 0 );
 
    updateNavImages();
};


Вывод

Данный слайдер можно использовать, как я уже говорил, просто на блоге в качестве галереи либо как витрина товаров в интернет-магазине.


Успехов!

Источник: tympanus.net

Еще материалы по этой теме

Спасибо за ваше обращение!

Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *