Slider z galerii

Slider z galerii

Z artykułu dowiesz się, jak wykorzystać wbudowaną galerię WordPress aby utworzyć prosty slider.

Slidery są jednym z najczęściej i najchętniej używanych elementów współczesnych stron internetowych. Aby utworzyć taki slider wcale nie trzeba nic kodować, wystarczy wykorzystać galerię WordPress i wtyczkę Slick Gallery.

1. Instalujemy wtyczkę

Wtyczkę instalujemy w standardowy WordPressowy sposób. Przechodzimy do kokpitu, wtyczki a następnie dodaj nową. W pasku wyszukiwania wpisujemy Slick Gallery a następnie klikamy przycisk Zainstaluj teraz.

instalacja_slick_gallery2

Po instalacji wtyczkę włączamy.

2. Dodajemy galerię WordPress

Kolejną czynnością będzie utworzenie galerii na stronie lub wpisie. Dla przykładu przejdźmy do wpisu i kliknijmy przycisk Dodaj medium.

slick_dodaj_medium

W otworzonym okienku wybierz opcję Utwórz galerię, załaduj następnie kilka zdjęć po czym kliknij przycisk Stwórz nową galerię, tak jak to zaprezentowałem na zrzucie poniżej.

slick_utworz_galerie

3. Ustawiamy Slick Gallery

Po kliknięciu Stwórz nową galerię oprócz wyboru liczby kolumn i rozmiaru zdjęć, będziemy mieli dostęp do opcji Slick Slidera. Aby Slick Gallery zadziałał, wystarczy Make slider ustawić na Yes, jednak aby uzyskać interesujący efekt ustawiłem trzy zdjęcia(Slides to show), za pomocą Slides to scroll ustawiłem aby Slick przesuwał tylko 1 zdjęcie, można tutaj ustawić większą wartość aby przewinąć większą ilość zdjęć za jednym kliknięciem. Za pomocą Slide Speed ustawiłem prędkość(0.3 sekundy) z jaką zmieniają się slajdy. Następne dwie opcje, czyli Autoplay i Autoplay speed odpowiadają za automatyczną zmianę zdjęć, w naszym przypadku co 5 sekund slider się przewinie automatycznie.

Całość powinna wyglądać tak jak na poniższym zrzucie.

slick_gotowe

Jednak w moim przypadku okazało się, że strzałki nawigacyjne nie były widoczne. Biały kolor na białym tle. Dlatego aby to naprawić kliknąłem wygląd, następnie personalizacja i w zakładce Własne CSS dodałem poniższe reguły.

Tak to wygląda w kokpicie.

slick_kokpit_strzalki

Od tego momentu wszystko działa poprawnie.

W ustawieniach Slick Gallery możemy jeszcze ustawić, aby po najechaniu myszką nie przewijał automatycznie slidera, aby strzałki nawigacyjne były lub nie były włączone, orientację slidera lub efekt przejścia.

Opcji jest więcej, dlatego zachęcam do samodzielnego poznania wtyczki. Jeżeli okazała się dla Ciebie przydatna, podziel się swoimi uwagami co do wtyczki w komentarzu.

Kamil Laskowski

Sympatyk systemów otwartoźródłowych. Człowiek z zapałem, doskonale wiedzący, czego chce od życia. W wolnych chwilach uwielbia tańczyć oraz grać na gitarze.