Zręczne parametry. Responsywne suwaki jQuery dla strony docelowej. Przykłady użycia różnych konfiguracji suwaka Slick

Cześć przyjaciele. Dzisiaj porozmawiamy responsywny jQuery suwaki, które pomogą ozdobić Twój plik wstęp, prawidłowo układać informacje i przedstawiać je zwięźle.

Kiedyś przeprowadziłem ankietę w portale społecznościowe i poprosił mnie o zasugerowanie przydatnego skryptu suwaka, którego możesz użyć samodzielnie. Post nie odniósł dużego sukcesu, ale doradzono mi świetne narzędzie, która dzisiaj będzie na pierwszym miejscu. Dziękuję ci bardzo za to. Może po tym artykule ktoś poleci jeszcze lepszy scenariusz.

TOP skrypty, które implementują slider na stronie

Ponieważ wszystkie przedstawione poniżej skrypty są wtyczkami jQuery, można je łatwo osadzić zarówno w zwykłych witrynach html, jak i na dowolnym CMS i wielu.

Karuzela sowa 2

Owl Carousel 2 to moim zdaniem najlepszy darmowy slider jQuery. Wiele ustawień, dostępność API i pełna personalizacja. Wszystko to sprawiło, że zakochałem się od pierwszego wejrzenia. Świetnie reaguje na smartfony i tablety, obsługuje przesuwanie i wiele więcej.

Slick slider

Na drugim miejscu postawiłbym teraz suwak Slick. Całkiem ciekawa opcja, z której korzystam od jakiegoś czasu. Jeśli chodzi o zadania związane ze stroną docelową, było dobrze. Komentarze do kasy, logo marek i partnerów, ten suwak poradził sobie z tym wszystkim z hukiem. Możliwe jest użycie metod i zdarzeń, a także wyświetlenie slidera w kilku miejscach na stronie.

Suwak Sudo

Suwak obsługuje między innymi przesuwanie poprzez przeciąganie i upuszczanie elementów na ekranie dotykowym, co niewątpliwie zachwyci odwiedzających Twoją stronę za pomocą smartfona lub tabletu.

Tak więc suwak ma nazwę slick.js.... Aby podłączyć suwak na stronie, wklej kod do głowa Twoja witryna następujące wiersze:

To wszystko! Suwak jest gotowy do pracy. Teraz pozostaje Ci tylko podłączyć go do niezbędnych elementów. Piszemy html:

i podłącz do niego suwak (ten kod lepiej umieścić w sekcji nagłówka):

Po takich prostych manipulacjach twój śliski suwak rozpocznie pracę z ustawieniami domyślnymi.

Zamiast SPIS TREŚCI 1, SPIS TREŚCI 2 i inne, możesz umieścić dowolną treść - obrazki, nagłówki, akapity i tak dalej. Na przykład dla sklepu internetowego możesz zrobić rotator produktów:

Możesz dodać nieograniczoną liczbę elementów do rotatora.

Suwak obsługuje również wiele ustawień - liczbę wyświetlanych elementów, liczbę przewijanych elementów, suwak pionowy lub poziomy, szybkość przewijania i inne.

Możesz także dostosować liczbę wyświetlanych elementów dla różnych rozdzielczości wyświetlania:

$ (document) .ready (function () ($ (". product-slider"). slick ((responsive: [(breakpoint: 1024, // dla wyświetlaczy do 1024px lub więcej) settings: (slidesToShow: 3, // amount wyświetlane elementy 3 slidesToScroll: 3, // liczba przewijanych elementów na raz 3 dots: true // show dots (według liczby elementów))), (breakpoint: 600, // dla wyświetlania mniej niż 600px ustawienia: (slidesToShow: 2, // liczba wyświetlanych pozycji 2 slidesToScroll: 2 // liczba przewijanych elementów jednocześnie 2)), (punkt przerwania: 480, // dla wyświetlania mniej niż 480px ustawienia: (slidesToShow: 1, // liczba przewijanych elementów jednocześnie 1 slidesToScroll: 1 // kwota elementy przewijalne naraz 1))]));));

Bardziej szczegółowe ustawienia można znaleźć pod adresem

przysiek - kompleksowe rozwiązanie do tworzenia funkcjonalności karuzeli w różnych jej formach. Wersje demonstracyjne i standardowe oraz źródła można przeglądać / pobierać.

Odetnij niepotrzebne

W podstawowej konfiguracji slick ma kilka skryptów, kilka stylów, własną czcionkę... Używam okrojonej wersji:

• slick.min.js (zminimalizowany)
• slick.css (+ możesz wyczyścić style)
• slick-theme.css (+ możesz wyczyścić style)

W razie potrzeby style można łączyć w jeden.
Zamieniam linki do gładkiej czcionki na wygodniejszą FontAwesome

Podstawowa karuzela

Główną funkcją karuzeli jest ustawienie div class \u003d „multiple-items”. div class \u003d "carousel" jest potrzebne tylko do ustawienia marginesów karuzeli.

Skrypt inicjujący skrypt

$ (document) .ready (function () ($ (". multiple-items"). slick ((// infinite: true, // scrolling in a circle autoplay: true, slidesToShow: 3, slidesToScroll: 3));) );

Slick-slider (width: 100%; float: left;) .slick-slide (cursor: pointer;) .multiple-items .slick-slide (margin: 0 15px;) .carousel (padding: 0 3%; float: left; width: 100%; box-size: border-box;) / * dla produktów woocommerce * / .carousel .woocommerce ul.products li.product (margin: 1em 0 1.992em 0; width: 100%;)

Karuzela na produkty woocommerce

Zmodyfikowana wersja

Nieznacznie uproszczono wyświetlanie produktów na karuzeli (! Nie jest to rozwiązanie uniwersalne, może być inaczej wyświetlane w różnych opcjach układu):

Podczas ładowania skryptów karuzeli występują zniekształcenia układu. Utwórzmy kilka początkowych stylów, które utrzymają karuzelę w bieżącym układzie:

Wiele pozycji (display: flex! Ważne; flex-wrap: wrap; margin-bottom: 25px;). Multiple-items img (-moz-backface-visibility: visible; -webkit-backface-visibility: visible; backface-visibility : widoczne;) .slick-list (margin: 0 -1px 0 0! important; padding: 0 1px 0 0! important; width: 100%;) .slick-track (border: solid # e9eaec; border-width: 0 0 0 1px; display: flex! Ważne; padding-bottom: .1rem;) .carousel .product (border: solid # e9eaec; border-width: 1px 1px 1px 0; background: #fff; padding: 15px; list-style : none; text-align: center; position: względna; margin-bottom: -.1rem; height: auto;) .multiple-items\u003e .product (width: 25%;)

Określono właściwości backface dla obrazów, ponieważ jeśli zostawisz ukryty, podczas przewijania ukryją etykiety.

Responsywność karuzeli

Skrypt można dostosować do różnych rozdzielczości ekranu. Aby to zrobić, określ responsywne parametry w ustawieniach.

Responsywny: [(punkt przerwania: 1280, ustawienia: (slidesToShow: 4, slidesToScroll: 4,)), (punkt przerwania: 1024, ustawienia: (slidesToShow: 3, slidesToScroll: 3,)), (punkt przerwania: 800, ustawienia: (slidesToShow : 2, slidesToScroll: 2)), (punkt przerwania: 480, ustawienia: (slidesToShow: 1, slidesToScroll: 1))]

Lub całkowicie wyłącz go w określonej rozdzielczości - ustawienia: „usuń kliknięcie”

Slick slider

Ostatnio również główny slider wykonuję w oparciu o slick. Jest mały problem - po załadowaniu strony wszystkie slajdy wyświetlają się na ułamek sekundy, a potem są dodawane. Ukryłem to w ten sposób:

Ukryj wszystko oprócz jednego slajdu:

Slick-track\u003e div: nth-child (2) img (display: block! Ważne;) # index-slider img (display: none;)

A kiedy strona się załaduje, włącz resztę:

JQuery (dokument) .ready (function () (jQuery ("# \u200b\u200bindeks-suwak img"). Css ("wyświetlacz", "blok");));

Ładowanie slajdów

Slick ma inny użyteczna funkcja lazyload (). Wystarczy dodać właściwość do skryptu lazyLoad: „ondemand”... I zmień wyjście obrazu:

albo możesz to uprościć w ten sposób:

ID), „pełne”); ?\u003e

Aby slajdy ładowały się wręcz przeciwnie, najpierw musisz zarejestrować plik lazyLoad: „progresywny”

Standardowe ładowanie obrazów nie działa całkiem poprawnie, polecam używać go w połączeniu z lazyload.

Mobilna wersja slidera
Można zwiększyć w mob. wersja wysokości suwaka, podczas gdy krawędzie obrazków zostaną obcięte, ale obrazek będzie większy:

@media screen i (max-device-width: 480px) (# index-slider, .hotel-photos (height: 200px;) .slick-list, .slick-track (height: 100%;) # index-slider img , .hotel-photos img (wysokość: 100%; dopasowanie obiektu: okładka;))

object-fit: okładka; - fajna właściwość CSS 3, obsługiwana przez większość przeglądarek

Slick Gallery

Ostatnio na jednej z witryn zauważyłem ciekawe wykorzystanie Slicka jako galerii. Osobliwością jest to, że obrazy z galerii sięgają krawędzi ekranu (strona od początku do pełnego ekranu).

Aby zaimplementować, musisz umieścić suwak (# index-slider) w kontenerze (.s2) i napisać następujące style:

S2 (overflow: hidden; display: block;) # index-slider (max-width: 1000px; margin: 0 auto;) .s2 .slick-list (overflow: visible;) # index-slider .slick-slide img ( max-width: 800px; margines: 0 auto;)

lub jeszcze prostsze:

Aby stworzyć taką galerię wystarczy zarejestrować 2 style:

# index-slider (max-width: 1280px; margin: 0 auto;) # index-slider .slick-list (przepełnienie: widoczne;)

Pobraliśmy skrypt suwaka w ostatniej lekcji za pomocą polecenia

$ bower i slick.js

Można go również znaleźć w Google - pierwszy link na żądanie slick http://kenwheeler.github.io/slick/

Zalety suwaka:

- obsługuje zdarzenia dotykowe - można je przeglądać z telefonu, przesuwając palcem
- obsługuje responsywność - możesz ustawić różną liczbę slajdów w zależności od rozmiaru ekranu: na dużych ekranach wyświetl 4 slajdy, na średnich ekranach, 2-3, na telefonach, po jednym naraz

Dobrą praktyką jest dołączanie skryptów z folderu bower_components



Następnie, gdy skrypt jest aktualizowany, bower nie musi przepisywać numeru wersji w kodzie, ponieważ bower nadaje skryptom stałe nazwy, które nie zmieniają się podczas aktualizacji.

Jeśli chodzi o style znajdujące się w folderze slick: slick.css, slick.less, slick.theme.less, lepiej skopiować je do folderu css i stamtąd połączyć. Jeśli pozostawisz je na miejscu i wprowadzisz zmiany w stylach suwaków, po zaktualizowaniu skryptu wszystkie te zmiany zostaną utracone.

W przeciwieństwie do innych suwaków ramki są umieszczane nie na liście, ale w blokach:

Zadzwoń bez parametrów

Wywołując wtyczkę bez parametrów otrzymujemy prostą wersję z jednym slajdem na stronie i strzałkami nawigacyjnymi.

$ („.single-item”). slick ();

Pokaż wiele slajdów

W tym przykładzie ustawiliśmy parametry przewijania pętli dla „slick slidera”, włączyliśmy wyświetlanie punktów nawigacyjnych oraz określiliśmy liczbę wyświetlanych i przewijanych slajdów.
$ („.multiple-items”). slick ((
nieskończony: prawda,
// zapętlony suwak - po ostatnim slajdzie pojawia się pierwszy kropki: prawda,
// kropki poniżej suwaka pokazujące aktywny slajd
slidesToShow: 3,
// liczba slajdów wyświetlanych na ekranie slidesToScroll: 1
// liczba slajdów, które są odwracane jednocześnie
});

Tryb centrowania

W trybie centrowania aktywny slajd jest wyśrodkowany.
$ (".środek"). slick ((
centerMode: true,
slidesToShow: 3,
});
Środkowa prowadnica ma klasę „śliskie centrum”, co oznacza, że \u200b\u200bmożna ją stylizować oddzielnie.

Zdolność adaptacji

Za pomocą suwaka można dostosować responsywne wyświetlanie określonej liczby slajdów w zależności od wartości szerokości ekranu. Na przykład musisz wyświetlić tylko 2 slajdy, gdy ekran ma szerokość mniejszą niż 600 pikseli i przełączać je pojedynczo. Rozwiązanie tego problemu będzie wyglądać następująco

$(„.uncycle”). gładki ((nieskończony: fałsz, prędkość: 350, // określ prędkość skrętu slidesToShow: 4, // liczba slajdów do pokazania slidesToScroll: 2, // ile slajdów obrócić na raz responsywne: [(punkt przerwania: 600, // mówi przy jakiej szerokości ekranu, aby włączyć ustawienia ustawienia: (slidesToShow: 2, slidesToScroll: 1, infinite: true,))]));

Płynne przełączanie

W stanie standardowym suwak wykonuje nagłą wymianę slajdów. Ale funkcja Slick zapewnia płynny tryb wymiany slajdów. Aby to zrobić, musisz skorzystać z atrybutu data-lazy, który określa ścieżkę do obrazu. Atrybut musi być przypisany nie do opakowania, ale do tagu obrazu. Pozwoli to uniknąć używania kodu js. Alternatywą byłoby to polecenie

LazyLoad: „ondemand”

Atrybut powinien być zapisany w ten sposób

< img data- lazy = " images/slaid.jpg" >

Płynna zmiana biegów bez ruchu

Osobliwością takiego suwaka jest to, że na ekranie jest tylko jeden slajd, który po przełączeniu stopniowo zmienia się w następny. Efekt opiera się na zasadzie stopniowego zwiększania przejrzystości. Oznacza to, że wybiera się pewien okres czasu, podczas którego przezroczystość pierwszego slajdu zmienia się z 0% na 100%, dzięki czemu następny slajd staje się widoczny. Tak będzie wyglądał skrypt takiego slidera

$(".blaknąć"). slick ((infinite: true, speed: 400, fade: true, cssEase: "linear"));

Slick to najbardziej wszechstronny i łatwy w użyciu suwak dostępny obecnie. Szeroki zakres ustawień slidera obejmuje ogromną różnorodność rozwiązań do implementacji sliderów, co jest chyba najważniejszą zaletą tego slidera.

Konfiguruję zręczny suwak

• dostępność - początkowa wartość tego parametru ustawiona jest na true, odpowiada on za podłączenie przycisków nawigacyjnych do slidera - są to strzałki do przodu i do tyłu, a także przyciski w postaci kropek.
• adaptiveHeight - dotyczy tylko jednego slidera, co spowoduje zmianę wysokości kontenera nadrzędnego w zależności od wysokości slidera. W warunkach początkowych ustawienie nie jest połączone.
• automatyczne odtwarzanie - konfiguruje odwracanie slajdów w trybie automatycznym, bez interwencji użytkownika. Wartość domyślna tego ustawienia to false.
• autoplaySpeed - parametr ten jest pomocniczy przy autoodtwarzaniu i ustawia okres czasu, po którym będzie wykonywany automatyczny pokaz slajdów. Początkowo jest ustawiony na 3000 milisekund.
• strzały - łączy strzałki do przodu i do tyłu z suwakiem. Możesz użyć zewnętrznego arkusza stylów, aby zmienić położenie i wygląd tych strzałek.
• asNavFor - ustanawia łącze nawigacyjne między dwoma suwakami za pomocą identyfikatora lub klasy. W warunkach początkowych parametr odpowiada zeru.
• prevArrow - umożliwia zmianę wyglądu standardowej strzałki nawigacyjnej przewijającej poprzedni slajd.
• nextArrow - jest podobny do funkcji poprzedniego parametru, ale odpowiada za strzałkę przełączającą suwak do przodu.
• centerMode - ustawia bieżący slajd na środku kontenera nadrzędnego, początkowo opcja jest wyłączona.
• centerPadding - gdy centralny tryb wyświetlania aktualnego slajdu jest włączony (poprzedni parametr), ustawia wewnętrzny margines dla tego slajdu, co pozwala wizualnie powiększyć aktualny slajd.
• cssEase - odpowiada za animację przełączania zdjęć, może sprawić, że będzie ona płynna lub ostrzejsza. Akceptuje domyślną wartość „łatwość”.
• customPaging - umożliwia wstawienie własnego szablonu, aby wyświetlić slider.
• kropki - łączy punkty przełączania, domyślnie jest wyłączone.
• przeciągalny - umożliwia odwracanie slajdów poprzez naciśnięcie myszki. Oznacza to, że jeśli najedziesz kursorem myszy na suwak, przytrzymasz go i przesuniesz w bok, slajd przełączy się na następny.
• blaknąć - tworzy efekt zanikania slajdu podczas przełączania, efekt animacji.
• focusOnSelect - skupia określony element suwaka.
• złagodzenie - pozwala ustawić specjalny tryb animacji podczas przełączania zdjęć.
• edgeFriction - wyłącza przełączanie slajdów na ostatnim elemencie. Działa tylko wtedy, gdy suwak nie jest zapętlony.
• nieskończony - zapętla pokaz slajdów. Oznacza to, że po przełączeniu ostatniego obrazu pokaz slajdów rozpocznie się od nowa.
• initialSlide - określa obraz, od którego zaczyna się pokaz slajdów. Domyślnie suwak startu wybiera pierwszy obraz w kolejności.
• lazyLoad - pozwala ustawić tryb ładowania kolejnych slajdów. Dostępne są tylko 2 ustawienia: „na żądanie” i „progresywne”, przy czym to drugie jest ustawieniem domyślnym.
• pauseOnHover - zatrzymuje odwracanie slajdów po najechaniu kursorem myszy na korpus suwaka. Działa tylko wtedy, gdy zdefiniowano automatyczne przełączanie suwaków.
• pauseOnDotsHover - przestaje odwracać slajdy po najechaniu kursorem na przełączniki punktowe. Działa tylko wtedy, gdy zdefiniowano automatyczne przełączanie suwaków.
• odpowiedzi na - powoduje reakcję na zmiany szerokości okna przeglądarki. Dostępne są trzy wartości: „okno”, „suwak” lub „min”.
• czuły - umożliwia dostosowanie ustawień suwaka do szerokości ekranu. Różni się od poprzedniego ustawienia tym, że limit szerokości jest określany przez dokładną wartość w pikselach. Używany do responsywnego układu dla urządzeń mobilnych.
• slidesToShow - pozwala ustawić liczbę obrazów wyświetlanych w widocznym obszarze. Początkowo wyświetlany jest 1 slajd, ale wartość tę można zmieniać.
• slidesToScroll - informuje suwak, ile zdjęć należy zmienić podczas przełączania.
• prędkość - ustala prędkość, z jaką będą przełączane slajdy.
• zmiennaWidth - dostosowuje szerokość kontenerów slidera do szerokości każdego wyświetlanego obrazu.

UPD:Próbowałem stworzyć slider na podstawie tej lekcji i okazało się, że jest on bardzo niekompletny.
Uzupełnianie.

1. Pobierz repozytorium tutaj https://github.com/kenwheeler/slick
2. W pliku index.html przed otwarciem dodaj style suwaków:

Przed zamknięciem podłącz skrypty

Ten suwak również wymaga czcionek. Folder czcionek z folderu suwaka należy umieścić w folderze css projektu.
A także w folderze suwaków musisz znaleźć obrazek ajax-loader.gif i zapisać do niego ścieżkę w pliku slick-theme.css

3. Teraz przypisujemy klasę elementowi div-wrapper suwaka, na przykład wiele elementów
A w pliku script.js piszemy kod

$ (dokument) .ready (funkcja () (
$ (". wiele elementów"). slick ((
autoplay: false,
autoplaySpeed: 6000,
strzałki: prawda,
nieskończony: prawda,
kropki: prawda,
centerMode: true,
slidesToShow: 3,
slidesToScroll: 1
});
});

4. Suwak już działa. Ale strzałki nie są widoczne, ponieważ znajdują się poza granicami suwaka, a szerokość suwaka to pełny ekran. Poszukaj strzałek w pliku slick-theme.css i zmień wcięcie tak, aby strzałki pozostały wewnątrz suwaka, a nie na zewnątrz.

5. Dobrze. Teraz, według mojego pomysłu, centralny suwak suwaka powinien różnić się od bocznych.
napisz, że wystarczy napisać w kodzie

$ (". środek"). slick ((
centerMode: true,
// wyśrodkuj bieżący slajd
centerPadding: "50px",
// nieznacznie powiększ bieżący slajd
slidesToShow: 3
// wyświetl 3 slajdy do oglądania
});

Aby zwiększyć rozmiar środkowego suwaka. W rzeczywistości ta metoda nie działa.
Powiększony środkowy slajd ze stylem
.slick-center (
background-color: # 8cc63f;
transform: scale (1.3);
}

Wyświetlaj wiele zręcznych suwaków i karuzeli obrazów za pomocą krótkiego kodu z kategorią. W pełni responsywny, włączony Swipe, przeciąganie myszą na pulpicie i nieskończone pętle. W pełni dostępny za pomocą nawigacji za pomocą klawiszy strzałek Autoodtwarzanie, kropki, strzałki itp.

Używa niestandardowego typu postu i taksonomii do tworzenia suwaka, z prawie nieograniczonymi opcjami i obsługą wielu suwaków na dowolnej stronie. Możesz także wyświetlić suwak obrazu w nagłówku swojej witryny.

Dodaliśmy 5 projektów slidera i 1 projekt karuzeli. Wszystkie projekty można znaleźć na naszej stronie demonstracyjnej. Po prostu skopiuj skrócony kod projektu, który lubisz i którego używasz.

Dziennik zmian

1.8 (08, sierpień 2019)

• [*] Zaktualizuj linki demo
• [*] Naprawiono kilka małych-małych problemów.
• [*] Zaktualizowany tekst pod wybranym obrazem, tj. Dodaj obraz slidera.

1.7.1 (31, maj 2019)

• [+] Dodano nowy parametr shortcode, np. Image_fit \u003d "true". parametr image_fit służy do określania, w jaki sposób należy zmienić rozmiar obrazu, aby pasował do jego kontenera. Domyślną wartością jest „prawda”. Dostępne opcje to „prawda LUB fałsz”. UWAGA: UWAGA: image_fit \u003d "true" działa lepiej, jeśli podano sliderheight. jeśli image_fit \u003d "false", nie ma potrzeby używania parametru sliderheight.
• [*] parametr image_fit działa zarówno z shortcode.
• [+] Dodano nowy parametr shortcode, np. Image_size \u003d "full" dla shortcode (domyślnie "full", wartości to miniatura, medium, medium_large, large, full)
• [-] Usunięto domyślną wysokość 400 z parametru sliderheight.
• [-] Usuń właściwość CSS dopasowaną do obiektu z img w CSS, jeśli image_fit \u003d "false".

1.6.2 (12, lut 2019)

• [*] Niewielka zmiana w przepływie akceptacji.

1.6.1 (26, gru 2018)

• [*] Zaktualizuj przepływ zgody.

1.6 (06, grudzień 2018)

• [*] Testowane z WordPress 5.0 i Gutenbergiem.
• [*] Naprawiono problemy z wysokością suwaka w niektórych projektach.
• [*] Lepsze bezpieczeństwo dzięki esc_url i esc_html.
• [*] Naprawiono kilka błędów CSS.

1.5.1 (5, czerwiec 2018)

• [*] Postępuj zgodnie ze szczegółowymi wytycznymi dotyczącymi wtyczek WordPress.

1.5 (10/3/2018)

• [*] Naprawiono kilka problemów CSS związanych ze strzałką suwaka.

1.4 (10/3/2018)

• [*] Naprawiono kilka problemów z CSS

1.3.4 (04/10/2017)

1.3.3 (04/10/2017)

• [*] Zaktualizowano slick.min.js do najnowszej wersji
• [*] Naprawiono wszystkie responsywne problemy i sprawdzono wiele urządzeń mobilnych.
• [*] Jeśli używasz jakiejkolwiek wtyczki pamięci podręcznej, wyczyść pamięć podręczną po aktualizacji wtyczki

1.3.2.1 (27/09/2017)

• [*] Naprawiono problem z projektem 6 z parametrem shortcode Variablewidth \u003d "true" w układzie responsywnym
• [*] Jeśli używasz jakiejkolwiek wtyczki pamięci podręcznej, wyczyść pamięć podręczną po aktualizacji wtyczki

1.3.2 (23/09/2017)

• [*] Naprawiono problem z projektem-6 z parametrem shortcode Variablewidth \u003d "true"
• [*] Jeśli używasz jakiejkolwiek wtyczki pamięci podręcznej, wyczyść pamięć podręczną po aktualizacji wtyczki

1.3.1.1 (23/09/2017)

• [*] Napraw responsywny problem zgłoszony przez użytkowników w wersji 1.3.1
• [*] Jeśli używasz jakiejkolwiek wtyczki pamięci podręcznej, wyczyść pamięć podręczną po aktualizacji wtyczki

1.3.1 (22/09/2017)

• [*] Napraw główny problem z JS wp_register_script

1.3 (22/09/2017)

• [+] Dodano sliderheight parametr w shortcode
• [*] RTL lepiej współpracuje z witrynami RTL
• [*] Tryb środkowy i szerokość zmiennej poprawiły się lepiej zgodnie z opiniami użytkowników
• [*] sliderheight poprawiono parametr

1.2.8 (22/05/2017)

• [+] Obsługiwane RTL

1.2.7 (25/04/2017)

• [+] Dodano nakładkę dla projektu-2

1.2.6 (07/11/2016)

• [+] Dodano „Jak to działa”
• [-] Usunięto zakładkę Pro design

1.2.5 (20/10/2016)

• Zaktualizowano wszystkie projekty i naprawiono błąd
• Naprawiono problem z wyświetlaniem obrazu na telefonie komórkowym
• Zamieniono obrazy strzałek

1.2.4

• Zaktualizowano js suwaka do najnowszej wersji.
• Zaktualizowana strona projektu wtyczki.

1.2.3

• Naprawiono niektóre problemy z CSS.

1.2.2

• Naprawiono niektóre problemy z CSS.
• Rozwiązano problem z konfliktem wielu suwaków jQuery.

1.2.1

• Naprawiono jakiś błąd
• Dodano wersję Pro z 16 projektami