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:
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/tutorials/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/
Odpowiedz lub skomentuj