Prosta i lekka biblioteka, która pozwoli Ci dodać karuzelę do swojej strony WWW

Front-end 9 minut czytania

Bardzo popularnym elementem dzisiejszych stron internetowych są tak zwane karuzele, czyli elementy, których zawartość możemy zmieniać przez pociągnięcie za slajd lub za pomocą guzików widocznych w przeglądanym serwisie.

Szczególnie ciekawy jest ten pierwszy sposób, bo jeśli obsługa naszej karuzeli będzie możliwa z poziomu myszki (lub palca w przypadku urządzeń mobilnych), to cała witryna stanie się bardziej interaktywna.

Właśnie w tym artykule chciałbym pokazać Ci prosty sposób na stworzenie karuzeli możliwej do obsługi właśnie w ten sposób! Zapraszam. 🙂

Jak stworzyć coś takiego?

Sporo osób zajmie się tym samodzielnie, inni natomiast sięgną po gotowe biblioteki dostępne w internecie. Bardzo popularnym przykładem jest polska OwlCarousel, która posiada sporo opcji personalizacji i świetnie spełnia swoje zadanie. A co jeśli tak rozbudowane narzędzie nie jest nam potrzebne?

Sam kiedyś stanąłem przed tym dylematem i znalazłem bibliotekę o nazwie Siema.js. Podobnie jak OwlCarousel jest polskiego autorstwa i na tle innych tego typu rozwiązań wyróżnia się przede wszystkim lekkością, bo wykonana została w czystym JavaScript’cie i w niezminifikowanej wersji zajmuje niecałe 300 linii kodu.

Jak używać tej biblioteki?

Oczywiście, aby cokolwiek zrobić, całość musimy dodać do naszej strony. Możemy tego dokonać na 2 sposoby. Standardowo:

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

…lub przez instalator modułów. Autor na swojej stronie podaje takie polecenie dla Webpacka oraz Browserify:

yarn add siema

…ale na przykład przez npm, bibliotekę zainstalujemy za pomocą takiej linii:

npm install siema

Później wszystko opiera się na prostym kodzie HTML (w sumie jednej klasie CSS) oraz JavaScript. Zacznijmy od tego pierwszego:

Kod HTML.

Ten prezentuje się w taki oto sposób:

<div class="siema">
  <div>Slajd 1</div>
  <div>Slajd 2</div>
  <div>Slajd 3</div>
</div>

Kontener, który stanie się naszą karuzelą posiada klasę siema (oczywiście możemy ją zmienić w konfiguracji biblioteki, o czym później) i zawiera pojedyncze slajdy.

Kod JavaScript.

W przypadku gdy bibliotekę dodaliśmy z pliku, wygląda on w ten sposób:

new Siema();

…a jeśli pobraliśmy ją jako moduł do naszej witryny, to całość prezentuje się tak:

import Siema from 'siema';
new Siema();

I to wszystko, już możemy cieszyć się działającą karuzelą! 🙂

Dodatkowe ustawienia.

Oczywiście w przypadku gdy standardowa funkcjonalność nam nie wystarczy, możemy zedytować obiekt naszego slidera za pomocą sporej ilości opcji:

new Siema({
  selector: '.siema',
  duration: 200,
  easing: 'ease-out',
  perPage: 1,
  startIndex: 0,
  draggable: true,
  multipleDrag: true,
  threshold: 20,
  loop: false,
  onInit: () => {},
  onChange: () => {},
});

W przypadku widocznego kodu, dla każdej z właściwości została przydzielona domyślna wartość. Oczywiście już wyjaśniam za co odpowiadają:

Podsumowanie.

Tak oto prezentuje się biblioteka Siema.js, jak widać za pomocą stosunkowo małego nakładu prac jesteśmy w stanie stworzyć ładną i funkcjonalną karuzelę na naszej stronie. Oczywiście wszystkie dokładne informacje można znaleźć na GitHubie.

Jak zawsze jeśli masz jakiekolwiek pytania lub sugestie, to zapraszam Cię do komentowania tego artykułu, a jeśli okazał się dla Ciebie wartościowy, to będę niezwykle wdzięczny za jego udostępnienie. 🙂

Komentarze

Może dodasz coś od siebie?