Touch слайдер с SwipeJS и jQuery

Публикуван: 14 ноември 2013
Категория: jQuery

В днешния урок ще ти покажа как да направиш елегантен слайдер, който ще работи на всякакви touch устройства - мобилен телефон, таблет или лаптоп. За устройствата, които разчитат на click, ще добавя бутони, чрез които да се сменят отделите слайдове.

Демо Свали

Съвсем скоро попаднах на Swipe. Това е touch слайдер изцяло написан на JavaScript, който не зависи от някаква допълнителна библиотека (напр. jQuery), за да работи. Просто добавяш js файла към страницита, изписваш 1-2 кратки команди и нещата просто работят.

Swipe работи най-добре на устойства, които поддържат CSS transforms и touch, но може спокойно да бъде използван и без тях.

Някои от основните отличителни черти на Swipe са:

responsive
не зависи от допълнителна JS библиотека
съвместим с IE7+
доста лесна конфигурация
кратко API съдържащо само няколко допълнителни метода
доста малък размер (без минимизиране и gzip, файла е само 14,3kb)

Аз лично доста се ентусиазирах, когато открих Swipe. Отне ми не повече от 10 мин, за да го изпробвам. Тестван е и работи на Nexus 4, Nexus 7, iPhone 4 и Sony Xperia SP.

Преди да ти покажа как да създадеш слайдшоу чрез Swipe има някои изисквания, които трябва да спазиш, за да го “подкараш” успешно.

Swipe

HTML

От документацията става ясно, че трябва да използваш следния шаблон всеки път, когато искаш да създадеш нов Swipe слайдер:

<div id="slider" class="swipe">
  <div class="swipe-wrap">
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

Съдържанието на всеки <div> </div> представлява самия слайд. В слайдовете може да бъде вместено всякакво съдържание. В този урок ще създам слайдер на изображения, тъй като това се среща доста често в уеб пространството.

CSS

За да работи без проблем, Swipe се нуждае и от следния CSS стил. Той е съвсем базов и можеш спокойно да го допълниш по-късно.

.swipe {
  overflow: hidden;
  visibility: hidden;
  position: relative;
}
.swipe-wrap {
  overflow: hidden;
  position: relative;
}
.swipe-wrap > div {
  float: left;
  width: 100%;
  position: relative;
}

Тук искам да отбележа, че може би Swipe няма да задоволи на 100% нуждите, които имаш. Гледай на този слайдер като най-минималното, от което се нуждаеш. В него няма да откриеш безброй функции и настройки. Добрата новина е, че ако имаш дори малко познания в JavaScript, можеш спокойно да го разшириш и да направиш свои подобрения.

Ок, надявам се, че вече си ентусиазиран/-а да изпробваш Swipe. В следващото упражнение ще ти покажа как да направиш слайдер, който ще сменя слайдовете едновременно чрез докосване (touch) или натискане (click) върху бутон.

Забележка 1: Въпреки, че Swipe не се нуждае от допълнителна JS библиотека (както споменах по-горе), в този урок ще комбинирам Swipe с jQuery. Към края на урок ще разбереш защо.

Забележка 2: По принцип, не би трябвало да има проблеми с повечето touch устройства, но ако все пак откриеш, че не работи на някой модел, разгледай GitHub страницата за възможни решения.

Упражнение

Избор на изображения

Изображенията, които ще използвам, са взети от Flickr. Можеш да откриеш линк към всяко от тях в ресурсите след урока.

Изображения използвани в упражнението

HTML структура

Базирайки се на шаблона по-горе, моят HTML код придоби следния вид:

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Touch слайдер с SwipeJS и jQuery</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Touch слайдер с SwipeJS и jQuery</h1>

    <div id="mySwipe" class="swipe">
      <div class="swipe-wrap">
        <div><img src="image-1.jpg" alt="Слайд 1"></div>
        <div><img src="image-2.jpg" alt="Слайд 2"></div>
        <div><img src="image-3.jpg" alt="Слайд 3"></div>
        <div><img src="image-4.jpg" alt="Слайд 4"></div>
      </div>
    </div>

    <div class="controls">
      <button class="prev">предишна</button>
      <button class="next">следваща</button>
    </div>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="swipe.js"></script>
    <script src="custom.js"></script>
  </body>
</html>

Тук имам стандартна HTML 5 страница. Използвам един външен CSS файл, който съм поставил в <head>. В него ще добавя стилът. В .swipe-wrap имам 4 отделни <div> (слайда) като всеки съдържа по едно изображение. Веднага след основния HTML има 2 бутона, които ще използвам за смяна на слайдовете.

Реших да използвам Google Hosted Libraries, за да добавя jQuery. Имам и два външния JavaScript файла, който съм поставил точно преди затварящия <body> таг. По този начин съм сигурен, че страницата е заредила напълно, преди да предприема някакви допълнителни действия.

swipe.js е основния Swipe файл, от който задължително се нуждаеш, за да работи слайдера. В custom.js ще поставя нужния jQuery/JavaScript код, който ще задейства слайдера. Тук са и всички останали настройки.

CSS стил

custom.css

body {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Swipe 2 required styles */
.swipe {
  overflow: hidden;
  visibility: hidden;
  position: relative;
}
.swipe-wrap {
  overflow: hidden;
  position: relative;
}
.swipe-wrap > div {
  float: left;
  width: 100%;
  position: relative;
}
/* END required styles */

.controls {
  text-align: center;
}
.swipe img {
  max-width: 100%;
}

Освен задължителния стил от по-горе, тук имам и няколко мои декларации. Например, тази на 28 ред ще направи изображенията responsive (адаптивни). Няма да стилизирам бутоните. Това ще го оставя на теб. Бъди креативен/-а.

Активиране на слайдера

Време е да “задвижа” всичко създадено до тук. В custom.js поставям следния код:

var mySwipe = $("#mySwipe").Swipe().data("Swipe");

$("#mySwipe") - тук използвам id селектор, за да селектирам елемента, който обгръща слайдера.
Swipe() - допълнителен метод добавен към главния jQuery обект. Swipe() ще “подкара” слайдера. Към него могат да се добавят няколко допълнителни свойства (обяснени по-долу), които са под формата на обект (т.е. име: стойност).
.data("Swipe") - информация, която се асоциира със селектирания елемент. На този етап не е нужно да знаеш за какво служи.

Всичко до тук се запазва в променливата mySwipe, която ще използвам по-късно като референция към слайдера. Това ще ми помогне да извикам нужните помощни методи към двата бутона.

Добрата новина е, че кода до тук ще “подкара” слайдера. Обаче той ще работи единствено на устройства, които поддържат touch, защото към бутоните все още не е добавен нужния код.

Допълнителни свойства

По-горе казах, че функцията Swipe може да приеме няколко допълнителни свойства. Всъщност, те са 8 на брой:

startSlide - номер на слайда, от който да започне слайдшоуто. По подразбиране тази стойност е 0. Приемат се единствено цели числа.
speed - скоростта (в милисекунди), с която да се сменят слайдовете. По подразбиране тази стойност е 300. Приемат се само цели числа.
auto - времето (в милисекунди), за което ще се задържи настоящия слайд преди да бъде сменен. Няма стойност по подразбиране. Приемат се само цели числа.
continuous - стойността тук прави слайдшоуто “безкрайно”. Когато последният слайд бъде показан, следващият ще бъде отново първият, създавайки чувството на продължително въртене. Приема единствено true/false. Стойност по подразбиране true.
disableScroll - предотвратява скролването на страницата, в случай че посетителя е докоснал контейнера със слайдшоуто. Приема единствено true/false. Стойност по подразбиране false.
stopPropagation - спира т.нар. event propagation. Приема единствено true/false. Стойност по подразбиране false.
callback - функция, която се изпълнява при всяка смяна на слайд.
transitionEnd - функция, която се изпълнява в края на прехода (transition) между два слайда.

Сега въпроса е как да добавиш тези допълнителни настройки? Доста е лесно. Това става като създадеш обект, в който всяка от гореизброените свойства идват под формата на име: стойност, разделени със запетайка. Всичко това се поставя във функцията Swipe. Например:

var mySwipe = $("#mySwipe").Swipe({
  auto: 3000,
  continuous: true
}).data("Swipe");

Този код ще накара слайдовете да се сменят автоматично на всеки 3 секунди. Също така слайдшоуто ще бъде продължително.

Swipe API

Освен допълнителните свойства, Swipe има и няколко помощни метода, които можеш да изпозваш за по-добър контрол на слайдера. Те са 5 на брой:

prev() - извиква предишния слайд
next() - извиква следващия слайд
getPos() - връща позицията на настоящия слайд
getNumSlides() - връща общия брой слайдове
slide(index, duration) - кара слайдера да се “плъзне” до конкретна позиция (index) за определено време (duration) в милисекунди.

Ако си спомняш, по-рано в урока добавих 2 бутона, с които да управлявам слайдера. Това ще ми помогне да направя слайдшоуто достъпно за хора, които използват мишка или друго подобно устройство, което разчита на “клик”.

Тъй като използвам jQuery, кода тук е съвмсем обикновен:

custom.js

$(".prev").on("click", mySwipe.prev);
$(".next").on("click", mySwipe.next);

Тук използвам class селектор, за да селектирам двата бутона. При click върху някой от тях, ще се изпълни съответния метод. Това ще извика предишния или следващия слайд.

Бонус: Всичко до тук в чист JavaScript

Съвсем в началото казах, че Swipe не зависи от допълнителна JS библиотека, но въпреки това използвах jQuery. Защо? Причината е най-вече заради старите версии на Internet Explorer. Ако не ти се налага да поддържаш IE < 8, тогава ти препоръчвам да използваш чист JavaScript. Така ще си спестиш зареждане на допълнителен файл (в случая jQuery) и кода ти ще бъде само няколко реда, което ще го направи значително по-бърз.

Тук ще намериш JavaScript еквивалента на целия код по-горе. Той работи в IE8+, както и всички останали съвременни браузъри.

Ето го и самия код:

var elem = document.getElementById("mySwipe"),
  prev = document.querySelector('.prev'),
  next = document.querySelector('.next');

var mySwipe = Swipe(elem, {
  auto: 3000,
  continuous: true
});

if (next.addEventListener) {
  next.addEventListener('click', nextSlide, false);
  prev.addEventListener('click', prevSlide, false); 
} else if (next.attachEvent) {
  next.attachEvent('onclick', nextSlide);
  prev.attachEvent('onclick', prevSlide);
}

function nextSlide() {
  mySwipe.next();
}

function prevSlide() {
  mySwipe.prev();
}

Заключение

Урока стана доста дълъг, но от друга страна е подробен, което се надявам да ти помогне в по-доброто му усвояване. Надявам се, че нещата до тук бяха лесни за следване и добре обяснени.

Swipe е един чудесен слайдер, който въпреки че не съдържа маса функции и екстри, е изключително гъвкав, лек и прецизен в работата си. Дори и да нямаш дълбоки познания по JS/jQuery, не би трябвало да имаш големи проблеми в награждането му.

Ако откриеш грешки в кода или имаш идеи за подобрението му, ще се радвам да ги споделиш в коментарите по-долу.

Ресурси

Демо Свали

Поздравления, това е краят на този урок!
За награда получаваш вкусен мъфин.

Награда за това, че успя да достигнеш до края на урока.

Уеб уроци и ресурси по HTML,
CSS, CSS3, JavaScript и други