29 września 2020

Karuzela (slajder) bez zależności od jQuery

Kategoria: Programowanie
Tagi: dla profesjonalistów,
Autor: Paweł Mansfeld

Ilość wtyczek realizujących funkcjonalność slajdera – karuzeli zależnych od jQuery może przyprawić o zawrót głowy. Używany przez co drugą stronę czy sklep internetowy Owl Carousel, Revolution Slider czy Slick.js to najpopularniejsze z nich. Niestety nie możemy z nich korzystać jeżeli za wszelką cenę chcemy uniknąć zależności od jQuery czyli popularnej biblioteki, która jak wiemy może być przeszkodą w uzyskaniu 100 punktów Pagespeed Insights na urządzeniach mobilnych.

Kiedy chcemy stworzyć karuzelę czyli slajder z wieloma elementami widocznymi na raz, pojawia się problem – ciężko znaleźć popularne, sprawdzone i niezawodne rozwiązanie, które nie wymaga zależności od jQuery. Od paru miesięcy tworzę strony z wykorzystaniem najnowszej wersji Bootstrapa 5. Ogromną zaletą jest wydajność takich stron zaś wadą jest brak możliwości wykorzystania popularnych wtyczek. W ostateczności cieńszą wersję jQuery można dodać do strony ale to obejście problemu, do którego nie warto się uciekać – tym bardziej przy tak prozaicznej potrzebie.

Zaraz, zaraz… Bootstrap natywnie wspiera slajder! Tak, ale naraz widoczny jest tylko jeden element. Chodzi tutaj o przypadek, kiedy chcemy mieć karuzelę tego typu – z kilkoma elementami widocznymi na raz:

Funkcjonalność karuzeli

Co prawda, istnieją na Stack Overflow i na CodePen jakieś wynalazki, które mają zmienić działanie tej karuzeli z Bootstrapa i prezentować kilka elementów ale takie rozwiązanie nie niesie praktycznie żadnych możliwości dostosowania takiego skryptu i w ogóle całość staje się zbyt hermetyczna.

Na szczęście istnieje gotowe rozwiązanie, z którego można skorzystać na własnej stronie. Przetestowałem, wdrożyłem je w jednym z projektów i mówiąc krótko spełniło swoje zadanie. Postanowiłem podzielić się tym małym odkryciem, zamieszczając krótką instrukcję instalacji oraz ilustrację możliwości.

Splide.js – skrypt karuzeli BEZ jQuery

Skrypt, który umożliwi wykorzystać funkcjonalność karuzeli/slajdera z wieloma elementami widocznymi na raz to Splide.js autorstwa Naotoshi Fujita. Skrypt napisany w czystym JavaScript wymaga dodania stylu i skryptu JS i odpowiedniej semantyki użytej w strukturze elementów, które mają się rotować w karuzeli.

Krok 1: Instalacja

Na początek pobieramy paczkę: https://github.com/Splidejs/splide/releases/tag/v2.4.12

W folderze dist znajdują się dwa pliki:

  • css/splide.min.css
  • js/splide.min.js

Pierwszy dodajemy do nagłówka strony jako standardowy styl css:

<link href="css/splide.min.css" rel="stylesheet">

Drugi jak można się domyślić przed znacznikiem zamykającym </body>:

<script src="js/splide.min.js"></script>

HTML

Podstawowa galeria składa się z listy, unikalnej klasy lub id oraz opcjonalnych atrybutów:

<div class="splide">
<div class="splide__track">
<ul class="splide__list">
<li class="splide__slide text-center"><img src="obrazek1.jpg"></li>
<li class="splide__slide text-center"><img src="obrazek2.jpg"></li>
<li class="splide__slide text-center"><img src="obrazek3.jpg"></li>
<li class="splide__slide text-center"><img src="obrazek4.jpg"></li>
</ul>
</div>
</div>

Wewnątrz nie muszą być zdjęcia, może to być dowolnie ostylowana struktura HTML.

Inicjalizacja

Aby wszystko działało musimy zainicjalizować skrypt:

<script>
new Splide( '.splide', {
type : 'slide',
perPage: 4,
breakpoints: {
992: {
perPage: 3,
},
768: {
perPage: 2,
},
640: {
perPage: 1,
}
}
} ).mount();
</script>

W tablicy breakpoints podajemy ilość elementów w danym punkcie granicznym. To jest przykład z jednego projektów, który wyświetla w największym widoku 4 elementy.

Zamiast type: ‚slide’ można dać ‚loop’ aby uzyskać efekt niekończącego się przewijania oraz ‚fade’ przydatny do standardowych sliderów z jednym elementem widocznym na raz.

W obszernej dokumentacji zaprezentowano możliwości konfiguracyjne oraz różne przykłady ich wykorzystania w praktyce. Zachęcam do sprawdzenia możliwości całego API.

Zalety Splide.js

  • niska waga stylu CSS (4.04 KB),
  • niska waga skryptu JS (28,3 KB),
  • spore możliwości konfiguracyjne,
  • możliwość łatwego wykorzystania brakpointów,
  • dopracowana obsługa dotyku,
  • łatwa instalacja,
  • kompatybilność z materiałami video,
  • gotowe integracje z Vue i React

Tworzenie galerii z wykorzystaniem Splide.js

Splide.js może być świetnym narzędziem do stworzenia galerii. Możemy wykorzystać rozwiązanie jakie proponuje sam autor: https://splidejs.com/gallery/ lub wykorzystać kod Lightbox prezentowany w innym wpisie: Lightbox bez jQuery.

Podsumowanie

Splide.js to skuteczna, dopracowana i bogata w opcje wtyczka JavaScript, która pozwoli na szybkie i łatwe umieszczenie karuzeli na naszej stronie bez zależności od jQuery. Niska waga stylu CSS i kodu JS nie spowalnia znacznie strony co pozwoli wykonać idealnie szybką stronę bez rezygnowania z coraz popularniejszych i przydatnych na urządzeniach mobilnych funkcji karuzeli o których pisałem w najnowszych trendach tworzenia stron internetowych.

Źródła

https://splidejs.com/category/users-guide/

Oceń artykuł na temat: Karuzela (slajder) bez zależności od jQuery
Średnia : 4.8 , Maksymalnie : 5 , Głosów : 5


 

Odpowiedz lub skomentuj

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *


 

Następny artykuł

Wykryto brak połączenia z Internetem.