Вертикальний слайдер за допомогою jquery і css переходами

У цьому уроці йдеться про те, як створити адаптивний повноекранний слайдер, причому слайди змінюються в протилежних напрямках. Даний слайдер може стане в нагоді тим, у кого є інтернет-магазини для більш красивого відображення товарів, але і для блогерів, щоб красиво оформити будь-яку сторінку на сайті, не роблячи її довгою.

Схожі уроки:

Галерея зображень на jQuery з цікавим ефектом
Цікавий слайдер на jQuery
Інтерактивна 3D галерея на CSS і jQuery
Розсувний слайдер тільки на CSS3

Приступимо!

Реальний приклад можна побачити тут:

Подивитися прімерСкачать

HTML частина

Структура сторінки буде наступна:

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950

id="Ps-container" class="Ps-container"gt;lt;div class="Ps-header"gt;lt;h1gt; Вертикальний слайдерlt;/h1gt;lt;/divgt;lt;div class="Ps-contentwrapper"gt;lt;div class="Ps-content"gt;lt;h2gt; Bernhardlt;/h2gt;lt;span class="Ps-price"gt; $ 120lt;/spangt;lt;/divgt;lt;div class="Ps-content"gt;lt;h2gt; Tobiaslt;/h2gt;lt;span class="Ps-price"gt; $ 85lt;/spangt;lt;/divgt;lt;div class="Ps-content"gt;lt;h2gt; P anglt;/h2gt;lt;span class="Ps-price"gt; $ 140lt;/spangt;lt;/divgt;lt;div class="Ps-content"gt;lt;h2gt; Mellbylt;/h2gt;lt;span class="Ps-price"gt; $ 195lt;/spangt;lt;/divgt;lt;div class="Ps-content"gt;lt;h2gt; Torbj rnlt;/h2gt;lt;span class="Ps-price"gt; $ 30lt;/spangt;lt;/divgt;lt;/divgt;lt;div class="Ps-slidewrapper"gt;lt;div class="Ps-slides"gt;lt;div style="Background-image: url (images / 1.jpg) ;"gt; lt;/divgt;lt;div style="Background-image: url (images / 2.jpg) ;"gt; lt;/divgt;lt;div style="Background-image: url (images / 3.jpg) ;"gt; lt;/divgt;lt;div style="Background-image: url (images / 4.jpg) ;"gt; lt;/divgt;lt;div style="Background-image: url (images / 5.jpg) ;"gt; lt;/divgt;lt;/divgt;lt;a href="#" class="Ps-prev" gt; lt;/agt;lt;a href="#" class="Ps-next" gt; lt;/agt;lt;/navgt;lt;/divgt;lt;/sectiongt;

CSS частина

Щоб використовувати іконки, необхідно прописати наступне:

Відео: Створюємо CSS slider на весь екран

1234567891011

@ 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%, а також абсолютне позиціонування:

123456789

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

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

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

Шапка матиме висоту 150 пікселів і розташовуватися зліва вгорі:

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

Для заголовків поставлене таке стиль:

123456789

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

А також задані спеціальні стилі для розмір екрана до 860 пікселів, але я не буду тут їх показувати, щоб сторінку не була дуже довгою.

javascript

Почнемо з визначення змінних:

1234567891011121314151617181920212223242526

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 gt; a.ps-prev ` ),$ navnext = $ Slidewrapper.find( `nav gt; a.ps-next ` ),// поточний індекс для елементів і слайдівcurrent = 0,// перевіряє чи виконується зараз перехідisAnimating = false,// підтримка CSS переходівsupport = Modernizr.csstransitions// transition end eventtransEndEventNames = {`WebkitTransition` : `WebkitTransitionEnd`,`MozTransition` : `Transitionend`,`OTransition` : `OTransitionEnd`,`MsTransition` : `MSTransitionEnd`,`Transition` : `Transitionend`}-

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

Відео: 1. Адаптивний слайдер для сайту - Slick.js

12345678910111213141516171819202122232425

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 gt; 0 ) ? $ Slides.eq( current - 1 ).css( `Background-image` ) : $ Slides.eq( itemsCount - 1 ).css( `Background-image` ),configNext = ( current lt; 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() )-},

Відео: Як зробити слайдер для сайту на HTML + CSS

Далі визначаємо подія, яка відбувається при кліці:

+12345678910111213141516171819

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 (). Ідея така, що наступний або попередній слайд постає знизу або згори, а також оновлюємо зображення, що знаходиться на тлі стрілок навігації:

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647

slide = function( dir ) {isAnimating = true-var $ currentItem = $ Items.eq( current ),$ currentSlide = $ Slides.eq( current )-if( dir === `Next` ) {( current lt; itemsCount - 1 ) ? ++current : current = 0-}else if( dir === `Prev` ) {( current gt; 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()-}-