Wiele osób na własnej stronie chce zobaczyćSliders - są to bloki, które stanowią jeden z elementów treści na ekranie, a po pewnym odstępie czasu zastąpienia zawartości do drugiego. Oczywiście, każdy web developer jest w stanie stworzyć swój własny suwak, za pomocą HTML, CSS i JavaScript, ale nie zawsze ma to sens. Będziesz spędzają dużo czasu, pomimo faktu, że Internet ma wiele gotowych rozwiązań, które znacznie ułatwiają życie i sprawia, że miejsce o wiele bardziej atrakcyjne. W tym artykule omówimy jedno z tych rozwiązań, nazywane Sowa Karuzela. Ustawienie tego suwaka jest niezwykle proste, więc nawet początkujący sobie z tym poradzi. Teraz dowiesz się, co ten suwak reprezentuje, a także inne ważne szczegóły. Konfigurowanie karuzeli Owl odbywa się krok po kroku, więc powinieneś uczyć się tego materiału tylko w kolejności.
Co to jest i dlaczego warto wybrać ten suwak?
Sowa Karuzela, której ustawienie będzieRozważany w tym artykule jest bardzo skuteczną wtyczką, która dodaje do twojej strony wygodny i wygodny suwak, który znacznie ułatwi ci pracę na stronie, pozwalając zaoszczędzić wiele czasu, wysiłku i pieniędzy. Jakie są zalety tej konkretnej wtyczki, ponieważ w Internecie jest dużo suwaków? Faktem jest, że suwak ten oferuje kilkadziesiąt opcji dostosowywania, które pozwolą uczynić twoją stronę wyjątkową i niepowtarzalną. Jest to plugin adaptacyjny, który działa we wszystkich wersjach przeglądarek i można go łatwo połączyć z WordPressem i innymi popularnymi CMSami. Ogólnie rzecz biorąc, zalety tego suwaka są bardzo duże, więc zdecydowanie powinieneś dokonać wyboru na swoją korzyść. Jednak przed rozpoczęciem konfigurowania karuzeli Owl należy pobrać tę wtyczkę.
Pobierz
Konfigurowanie karuzeli Owl 2 nie jest możliwe, jeśli tego nie zrobiszpobrać go na komputer, a ponieważ jest to instrukcja krok po kroku, warto 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 dowiesz się, jak uzyskać tę wtyczkę w standardowy sposób. Musisz przejść do oficjalnej strony wtyczki i pobrać jej najnowszą wersję. Następnie wszystkie pobrane pliki powinny zostać przeniesione do katalogu twojej witryny, przygotowując wygodny folder, który jest nazywany samym wtyczką. Zwróć uwagę, że ta wtyczka jest powiązana z jQuery, więc musisz mieć dostęp do tej biblioteki. Cóż, kiedy pobierzesz tę wtyczkę, musisz wykonać następny krok, a mianowicie ustawienie suwaka Owl Carousel 2.
CSS
W karuzeli sowa 1.3 ustawienia pozostają prawie takie same jak w nowszej drugiej wersji, dodawane są tylko nowe funkcje. Jednak podstawowe informacje będą takie same, począwszy od dodania CSS do dokumentu. Tak więc pierwszym krokiem jest dodanie linii do kodu HTML . Co ona ci daje?Jest to linia, która przesyła niezbędne style do witryny, aby wyświetlić suwak. Możesz to zakończyć, wykonując przetwarzanie wizualne samodzielnie. Istnieje jednak wygodniejsze i szybsze rozwiązanie. Możesz także dodać linię , которая загружает также стандартную тему suwak, dzięki któremu jest natychmiast gotowy do użycia. Możesz edytować niektóre style, dzięki czemu suwak jest bardziej unikalny i nietypowy, a także bardziej odpowiedni do treści. Oczywiście ustawienia Sowy 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 JavaScript
Oczywiście suwak nie będzie działał bez JS,dlatego musisz również zadbać o to, aby dołączyć odpowiedni plik zawierający niezbędny kod. Aby to zrobić, musisz wstawić wiersz kodu z dokumentacji jednak pod jednym warunkiem.Wszyscy wiedzą, że JS jest językiem programowania, który wykonuje wszystkie polecenia odpowiednio, w takim przypadku należy dodać ten wiersz kodu po wierszu, który dodaje bibliotekę jQuery do dokumentu. W przypadku tego suwaka nie musisz nic więcej robić z JS.
Układ kodu HTML
Podłączyłeś suwak, teraz czaswydać i skonfigurować. Przede wszystkim musisz napisać kod HTML, aby suwak pojawił się na twojej stronie. Aby to zrobić, musisz utworzyć kontener, który będzie zawierał slajdy. Możesz to zrobić za pomocą znacznika div, któremu należy przypisać klasę owl-carousel. Ta klasa zapewnia aktywację wszystkich stylów dotyczących suwaka. Możesz także zarejestrować inną klasę - motyw sowy. Przyda ci się, jeśli zdecydujesz się na użycie domyślnego projektu lub jeśli wykorzystasz standardową wersję suwaka jako podstawę do dalszej pracy.
Następnie musisz dodać każdy slajd w osobnym pojemniku z tagiem div. Oczywiście możesz używać innych tagów, ale ten tag najlepiej nadaje się w przypadku suwaków.
Wywołanie wtyczki
Ostatnią rzeczą, którą musisz zrobić, aby gotowy suwak pojawił się w witrynie, jest użycie tego bloku kodu:
$ (dokument) .ready (function () {
$ (". owl-carousel"). owlCarousel ();
});
Zapewnia to uruchomienie suwakafunkcja, czyli przewijaj zawartość podczas ładowania 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
Jakich poleceń możesz użyć,dostosować suwak? Przede wszystkim musisz zapamiętać polecenie items, ponieważ dzięki niemu możesz ustawić określoną liczbę slajdów na suwaku. Polecenie zapętlenie pozwala wybrać, czy suwak ma być zapętlony, czy zatrzymać przewijanie ostatniego elementu. Istnieje również polecenie Przeciągnij, które ma kilka opcji, na przykład mysz i dotyk. W pierwszym przypadku możesz to zrobić, aby elementy suwaka można było odwrócić za pomocą zaciśniętej myszy, aw drugim przypadku przez dotknięcie (to polecenie jest odpowiednie dla urządzeń mobilnych). Kolejnym ważnym poleceniem jest nav, które umożliwia wyświetlanie strzałek nawigacyjnych. Razem z nim możesz użyć polecenia navText, dodając podpisy do przycisków nawigacyjnych. Nie należy również zapominać o komendzie autoodtwarzania, która umożliwia włączanie i wyłączanie automatycznego uruchamiania przewracania slajdów slajdu po załadowaniu strony. Wraz z tym poleceniem możesz także użyć funkcji autoplayTimeout, dla której możesz ustawić określoną wartość w milisekundach, która określi czas między automatycznym przewijaniem każdego slajdu.
Jeśli używasz responsywnego projektowania stron internetowych, tojeśli projekt strony zmienia się automatycznie w zależności od urządzenia, na którym jest wyświetlana, zdecydowanie musisz zapamiętać responsywne polecenie, które pozwala ustawić liczbę wyświetlanych slajdów w zależności od szerokości ekranu, na którym strona jest wyświetlana.
