Lory Carousel Slider zawiera funkcje CSS Animation i Touch Support

Ze wszystkich wtyczki karuzelowe online Muszę przechylić kapelusz Lory. To takie prosta koncepcja ale jest to łatwe najpotężniejsze suwaki w sieci.

The wersja minified wynosi około 7 KB, co nie jest małe, ale na pewno nie jest zły dla suwaka karuzeli z obsługą dotykową.

Możesz dodać tę wtyczkę do dowolnej strony internetowej od tego czasu działa na jQuery lub zwykłej waniliowej JS. Może działać z brak zależności co jest idealne dla kompatybilności.

Lory jest również jedną z niewielu wtyczek nie degraduje się w starszych przeglądarkach. Jego w pełni obsługiwane w IE10+, a starsze wersje mogą nadal uruchamiać suwak bez animacji i małych dodatków.

Będziesz musiał sam wykonaj programowe kodowanie jeśli chcesz dodać treść, ale to jest zaskakująco prosty. Możesz określić, jak duży ma być każdy panel, jak długo animować i jak obsługiwać responsywne przeglądarki.

Sprawdź stronę główną Lory dla kod źródłowy i szczegóły dotyczące konfiguracji.

Zacznij od dodania biblioteki Lory JS do Twojej witryny głowa Sekcja, jako wtyczka jQuery lub biblioteka waniliowa. Wszystkie wersje są obecnie hostowane na CDN Cloudflare, więc super łatwe jest dołączenie kopii bez pobierania.

Po zainstalowaniu pliku JavaScript będziesz chciał utworzyć nieuporządkowaną listę HTML z zawartością slajdu, ale Lory zawiera kilka predefiniowanych klas więc dobrze jest trzymaj się ich modelu.

Oto kilka przykładowy kod zaczerpnięte z głównego repozytorium Lory GitHub:

Teraz w jQuery (lub zwykłym JS) możesz skonfigurować wywołanie funkcji. Powinien wyglądać mniej więcej tak:

 $ ('. js_slider'). lory (nieskończenie: 1);

Zanotuj nieskończony opcja to tylko jedna z wielu funkcji, które możesz dostosować. I zawsze możesz zmienić .js_slider klasa dostosowana do Twoich potrzeb.

Podczas rozwijania tej wtyczki możesz mieć mnóstwo pytań dotyczących dostosowywania. Gorąco polecam przeglądanie dokumentacji który znajduje się na samym dole strony GitHub.

Prawdopodobnie nie najlepsza lokalizacja dla doktorów, ale na szczęście są dość małe. Masz tylko około 10 opcji dostosowywać i być może 10-12 różnych wydarzeń możesz majstrować przy. Informacje te można również znaleźć na dole strony internetowej Lory, ale jest znacznie łatwiejsze do przeczytania na GitHubie.

Aktualizacje nie są tak częste, ale zawsze możesz złóż wniosek o wydanie w GitHub, jeśli napotkasz problemy. Jeśli naprawdę masz problemy z kodem, prawdopodobnie będziesz miał łatwiejszy sposób ich rozwiązywania na Stack Overflow.

Tak czy inaczej, możesz zacznij dość szybko przy użyciu Cloudflare CDN i dokumentów GitHub. A jeśli szukasz demo na żywo z kodem sprawdź ten wpis CodePen.