Wiele osób na własnej stronie chce widzieć slidery - są to bloki, które wyświetlają jeden element treści na ekranie, a po pewnym czasie zmieniają tę treść na inną. Oczywiście każdy web developer jest w stanie samodzielnie stworzyć slider za pomocą HTML, CSS i JavaScript, ale nie zawsze ma to sens. Spędzisz sporo czasu, pomimo tego, że w Internecie jest sporo gotowych rozwiązań, które znacznie ułatwiają Ci życie i uatrakcyjniają witrynę. W tym artykule skupimy się na jednym z tych rozwiązań o nazwie Owl Carousel. Konfiguracja tego suwaka jest niezwykle prosta, więc poradzi sobie nawet początkujący. Teraz dowiesz się, czym jest ten suwak, a także inne ważne szczegóły. Konfiguracja karuzeli Owl Carousel przebiega krok po kroku, dlatego należy zapoznać się z tym materiałem tylko w kolejności.
Co to jest i dlaczego warto wybrać ten konkretny suwak?
Sowa Karuzela, której konfigurację omówimy w tym artykule, to bardzo efektywna wtyczka, która dodaje do Twojej strony piękny i wygodny slider, co znacznie ułatwi Ci pracę w serwisie,oszczędność czasu, wysiłku i pieniędzy. Jakie są zalety tej konkretnej wtyczki, ponieważ suwaków w sieci jest całkiem sporo? Faktem jest, że ten suwak oferuje dziesiątki opcji dostosowywania, dzięki którym Twoja strona będzie wyjątkowa i niepowtarzalna. Jest to responsywna wtyczka, która będzie działać we wszystkich wersjach przeglądarek i może być łatwo podłączona do WordPressa i innych popularnych CMS. Ogólnie rzecz biorąc, ten suwak ma wiele zalet, dlatego zdecydowanie powinieneś dokonać wyboru na jego korzyść. Jednak zanim zaczniesz konfigurować Owl Carousel, ta wtyczka nadal musi zostać załadowana.
Pobierz
Skonfigurowanie Owl Carousel 2 nie jest możliwe, jeśli nie pobrałeś go na swój komputer, a ponieważ jest to instrukcja krok po kroku, powinieneś zacząć od samego początku. Tak więc program można pobrać za pomocą menedżerów pakietów, ale są to zaawansowane narzędzia programistyczne, więc tutaj powiemy, jak zdobyć tę wtyczkę w standardowy sposób. Musisz wejść na oficjalną stronę wtyczki i pobrać jej najnowszą wersję. Następnie wszystkie pobrane pliki należy przenieść do katalogu Twojej witryny, po przygotowaniu wygodnego folderu, który nosi taką samą nazwę jak sama wtyczka. Zauważ, że ta wtyczka jest dołączona do jQuery, więc musisz mieć również dostępną tę bibliotekę. Cóż, po pobraniu tej wtyczki musisz zająć się następnym krokiem, czyli ustawieniem suwaka Owl Carousel 2.
CSS
BUstawienia Owl Carousel 1.3 pozostają prawie takie same jak w nowszej wersji 2, dodawane są tylko nowe funkcje. Jednak podstawowe informacje będą takie same, zaczynając od dodania CSS do dokumentu. Więc pierwszym krokiem jest dodanie linii. Co ona ci daje? Jest to ciąg, który ładuje niezbędne style do witryny, aby wyświetlić suwak. Tutaj możesz zakończyć, samodzielnie wykonując przetwarzanie wizualne. Istnieje jednak wygodniejsze i szybsze rozwiązanie. Możesz także dodać linię, która ładuje również domyślny motyw suwaka, dzięki czemu jest od razu gotowy do użycia. Możesz edytować niektóre style, aby suwak był bardziej unikalny i inny oraz bardziej pasował do treści. Naturalnie ustawienia Owl Carousel w języku rosyjskim byłyby bardzo wygodne, ale każda osoba, która tworzy strony internetowe, powinna zrozumieć, że nie może obejść się bez znajomości języka angielskiego.
Połączenie JavaSpript
Oczywiście slider nie będzie działał bez JS, dlatego należy również zadbać o dołączenie odpowiedniego pliku zawierającego niezbędny kod. W tym celu należy wstawić linijkę kodu z dokumentacji, jednak musi być spełniony jeden warunek. Wszyscy wiedzą, że JS to język programowania, który wykonuje wszystkie polecenia po kolei, więc w tym przypadku powinieneś dodać tę linię kodu po linii, która dodaje bibliotekę jQuery do twojego dokumentu. Więcej z JS w przypadku tego slidera nie masz nic do robotypotrzeba.
Kodowanie HTML
No cóż, suwak został podłączony, teraz nadszedł czas, aby go zaprojektować i dostosować. Przede wszystkim musisz napisać kod HTML, aby slider w ogóle pojawił się na Twojej stronie. Aby to zrobić, musisz stworzyć kontener, który będzie zawierał slajdy. Można to zrobić za pomocą znacznika div, któremu należy przypisać klasę owl-carousel. To właśnie ta klasa zapewnia, że wszystkie style powiązane z suwakiem zostaną aktywowane. Możesz także napisać inną klasę - motyw sowy. Przyda się, jeśli zdecydujesz się na użycie domyślnego projektu lub weźmiesz standardową wersję slidera jako podstawę do dalszych prac.
Następnie musisz dodać każdy slajd w osobnym pojemniku z tagiem div. Oczywiście możesz użyć innych tagów, ale ten tag jest najlepszy dla sliderów.
Wtyczka połączeń
Ostatnią rzeczą, którą musisz zrobić, aby mieć gotowy suwak na swojej stronie, to użyć tego bloku kodu:
$(dokument).gotowy(funkcja(){
$(".owl-carousel").owlCarousel();
});
Zapewnia to, że suwak zacznie działać, tj. przewijać zawartość po załadowaniu strony. Za pomocą tego samego kodu możesz połączyć Owl Carousel z WordPress. Ustawienia tej wtyczki są liczne i zróżnicowane, a teraz dowiesz się o najważniejszych punktach.
Ustawianie wyglądu i funkcjonalności suwaka
Więc jakich poleceń możesz użyć, aby dostosować swój suwak? Przede wszystkim musisz zapamiętać polecenie items, bo dzięki niemu możesz ustawić określoną liczbę slajdów w swoim sliderze. Polecenie pętli pozwoli Ci wybrać, czy chcesz zapętlić suwak, czy zatrzymać przewijanie na ostatnim elemencie. Istnieje również polecenie Przeciągnij, które ma kilka opcji, takich jak mysz i dotyk. W pierwszym przypadku możesz sprawić, by elementy Twojego slidera można było przesuwać przytrzymując wciśniętą myszkę, a w drugim za pomocą dotyku (to polecenie jest odpowiednie dla urządzeń mobilnych). Kolejnym ważnym poleceniem jest nav, które umożliwia wyświetlanie strzałek nawigacyjnych. Wraz z nim możesz użyć polecenia navText, aby dodać etykiety do przycisków nawigacyjnych. Nie należy również zapominać o poleceniu autoodtwarzania, które pozwala włączać i wyłączać automatyczne uruchamianie slajdów suwaka podczas ładowania strony. Za pomocą tego polecenia możesz również użyć autoplayTimeout, dla którego możesz ustawić konkretną wartość w milisekundach, która określi czas między automatycznym obróceniem każdego z slajdów.
Jeśli korzystasz z responsywnego projektowania stron internetowych, to znaczy, że wygląd Twojej strony zmienia się automatycznie w zależności od urządzenia, na którym jest przeglądana, to zdecydowanie musisz pamiętać o poleceniu responsywnym, które pozwala ustawić liczbę slajdów do wyświetlenia w zależności od szerokości ekranu, na którym strona jest przeglądana.
