Prosty suwak z podglądem jquery. Prosty suwak z przyciskami sterowania do przodu i do tyłu

Na początek ten artykuł został napisany w celu poinformowania Cię, jak utworzyć suwak przewijania obrazu dla stron internetowych. Ten artykuł nie ma charakteru edukacyjnego, służy jedynie jako przykład tego, jak możesz zrealizować nasz przedmiot rozważań. Możesz użyć kodu podanego w tym artykule jako swoistego szablonu dla takich zmian, mam nadzieję, że będę w stanie przekazać czytelnikowi całą esencję tego, co napisałem, wystarczająco szczegółowo i w przystępny sposób.

A teraz do rzeczy, nie tak dawno musiałem umieścić suwak na jednej stronie, ale po przeszukaniu internetu w poszukiwaniu gotowych skryptów nie znalazłem nic wartościowego. niektóre nie działały tak jak potrzebowałem, podczas gdy inne w ogóle nie uruchamiały się bez błędów w konsoli. Posługiwać się jQuery - wtyczki wydawało mi się to zbyt nieciekawe dla suwaka, tk. Chociaż rozwiążę tym problem, nie będę miał zrozumienia działania tego mechanizmu, a korzystanie z wtyczki ze względu na jeden slider nie jest zbyt optymalne. Nie bardzo chciałem też rozumieć krzywe skrypty, dlatego postanowiłem napisać własny skrypt do slidera, który sam będę zaznaczał tak, jak potrzebuję.

Na początek musimy zdecydować się na logikę samego slidera, a następnie przejść do implementacji, na tym etapie bardzo ważne jest jasne zrozumienie działania tego mechanizmu, ponieważ bez niego nie możemy napisać kodu, który działa dokładnie tak, jak chcemy.

Naszym głównym celem będzie rzutnia czyli klocek w którym zobaczymy jak wirują nasze zdjęcia, w nim będziemy mieli slajd, będzie to nasz blok zawierający wszystkie obrazy, ułożone w jednej linii, który zmieni swoją pozycję wewnątrz samego rzutnia.


Dalej po bokach wewnątrz rzutnia, pionowo pośrodku, będą umieszczone przyciski wstecz i dalej, po kliknięciu których zmienimy również położenie naszego slajd stosunkowo rzutnia, powodując w ten sposób efekt przewijania zdjęć. I wreszcie ostatnim obiektem będą nasze przyciski nawigacyjne znajdujące się na dole. rzutnia.


Klikając na nie, po prostu spojrzymy na numer seryjny tego przycisku i przejdziemy do potrzebnego nam slajdu, ponownie przesuwając slajd(przesunięcie zostanie wykonane poprzez zmianę) przekształć właściwości CSS, którego wartość będzie stale obliczana).

Myślę, że logika całej tej sprawy powinna być jasna po tym, co napisałem powyżej, ale jeśli nadal gdzieś są nieporozumienia, to wszystko zostanie wyjaśnione w poniższym kodzie, wystarczy trochę cierpliwości.

Teraz napiszmy! Przede wszystkim otworzymy nasze plik indeksu i napisz tam potrzebne nam znaczniki:

Jak widać nic skomplikowanego blok-za-suwak służy jako ten sam blok, w którym zostanie umieszczony nasz slider, w nim samym rzutnia w którym nasz slajd, czyli lista zagnieżdżona, tutaj Li są slajdy i obrazek- zdjęcia w nich. Proszę zwrócić uwagę, że wszystkie zdjęcia muszą mieć ten sam rozmiar lub przynajmniej proporcje, w przeciwnym razie suwak będzie wyglądał krzywo, tk. jego wymiary zależą bezpośrednio od proporcji obrazu.

Teraz musimy to wszystko wystylizować, zazwyczaj style nie są tak naprawdę komentowane, ale postanowiłem zwrócić na to uwagę, aby w przyszłości nie było nieporozumień.

Zacznijmy blok-za-suwak, to znowu jest nasz blok na stronie, który odłożymy na suwak, jego wysokość będzie zależeć od jego szerokości i proporcji naszego obrazu, ponieważ rzutnia zajmuje całą szerokość blok-za-suwak wtedy ja ślizgać się ma taką samą szerokość, a zatem obraz w nim zmienia swoją wysokość w zależności od szerokości (proporcje są zachowane). Umieściłem ten element poziomo na środku mojej strony, dopełniając 100px od góry, dzięki czemu jego położenie jest wygodniejsze na przykład.

Element rzutnia, jak już wspomniano, zajmuje całą szerokość naszego blok-za-suwak, ma właściwość przepełnienie: ukryte, pozwoli nam to ukryć nasz kanał obrazu, który wyskoczy z widoku.


Następny właściwość css - wybór użytkownika: brak, pozwala pozbyć się niebieskiego zaznaczenia poszczególne elementy suwak z wieloma kliknięciami przycisków.

Przejść do slajd Czemu pozycja: względna, ale nie absolutny? Wszystko jest bardzo proste, tk. jeśli wybierzemy drugą opcję, to z właściwością Przepełnienie rzutni: ukryte absolutnie nic nam się nie wyda, tk. ja rzutnia nie dostosuje się do wzrostu slajd, bo co będzie miał wysokość: 0... Dlaczego szerokość ma tak duże znaczenie i dlaczego w ogóle ją ustawiamy? Faktem jest, że nasze slajdy będą miały szerokość równą 100% widocznego obszaru, a żeby ułożyć je w linii potrzebujemy miejsca, w którym będą stać, a więc szerokość slajd powinno być równe 100% szerokości widocznego obszaru pomnożona przez liczbę slajdów (w moim przypadku 4). Dotyczący przemiana oraz funkcja czasu przejściowego to tutaj 1s oznacza, że ​​zmiana pozycji slajd nastąpi w ciągu 1 sekundy i będziemy to obserwować, oraz wyluzować- rodzaj animacji, w której najpierw jedzie powoli, przyspiesza do środka, a potem znowu zwalnia, tu już możesz ustawić wartości według własnego uznania.

Kolejny blok zestawów właściwości slajd a jego dzieci mają zero padding, komentarze są tutaj niepotrzebne.

Następnie stylizujemy nasze slajdy, ich szerokość powinna być równa szerokości. rzutnia, lecz odkąd są w slajd, którego szerokość jest równa szerokości okienka ekranu pomnożonej przez liczbę slajdów, a następnie uzyskać szerokość rzutnia znowu potrzebujemy 100% szerokości slajd podziel przez liczbę slajdów (w moim przypadku znowu przez 4). Następnie zamieniamy je w elementy inline za pomocą wyświetlacz: wbudowany i ustaw przepływ w lewo, dodając właściwość pływak: w lewo... O styl listy: brak Mogę powiedzieć, że używam go do usunięcia domyślnego znacznika z Li, w większości przypadków jest rodzajem standardu.

Z slajd-obraz wszystko jest proste, obrazek zajmie całą szerokość ślizgać się, ślizgać się dopasowuje się do swojej wysokości, slajd dopasowuje się do wzrostu ślizgać się, a wysokość rzutnia z kolei przyjmie wartość wysokości slajd, zatem wysokość naszego slidera będzie zależeć od proporcji obrazu i wielkości bloku przewidzianego dla slidera, o czym pisałem już powyżej.

Myślę, że w tym miejscu ustaliliśmy style, zróbmy na razie prosty pokaz slajdów bez przycisków, a po upewnieniu się, że działa poprawnie, dodajmy je i stylizujmy.

Otwórzmy nasze plik js, który będzie zawierał kod suwaka, nie zapomnij dołączyć jQuery odkąd będziemy pisać za pomocą tego frameworka. Nawiasem mówiąc, w chwili pisania tego tekstu używam wersji jQuery 3.1.0... Plik z samym skryptem musi znajdować się na samym końcu tagu ciało odkąd będziemy pracować z elementami DOM, które należy najpierw zainicjować.

Na razie musimy zadeklarować kilka zmiennych, jedna będzie przechowywać numer slajdu, który widzimy w określonym momencie w rzutnia, nazwałem ją przesuńTeraz, a drugi zapisze liczbę tych samych slajdów, to jest slajdCount.

Zmienny przesuńTeraz konieczne jest ustawienie wartości początkowej 1, ponieważ gdy strona się załaduje, na podstawie naszych znaczników zobaczymy pierwszy slajd w rzutnia.

V slajdCount podamy liczbę dzieci slajd, tutaj wszystko jest logiczne.
Następnie musisz stworzyć funkcję, która będzie odpowiedzialna za przełączanie slajdów z prawej na lewą, zadeklarujemy ją:

Wywołamy to w głównym bloku naszego kodu, do którego dojdziemy, ale na razie powiemy naszej funkcji, co ma zrobić:

Najpierw sprawdzamy, czy jesteśmy teraz na ostatnim slajdzie naszego kanału? Aby to zrobić, bierzemy liczbę wszystkich naszych slajdów za pomocą $ ("# slidewrapper"). dzieci (). length i sprawdź to z numerem naszego slajdu, jeśli okażą się równe, to oznacza, że ​​musimy ponownie zacząć pokazywać wstążkę, od 1 slajdu, czyli zmieniamy właściwość przekształcenia css w slajd na przetłumacz (0, 0), przesuwając go w ten sposób do pierwotnej pozycji tak, aby pierwszy slajd pojawił się w naszym polu widzenia, nie zapomnij również o –Webkit i –ms dla odpowiedniego wyświetlania w różnych przeglądarkach (patrz. odniesienie do właściwości CSS). Następnie nie zapomnij zaktualizować wartości zmiennej. przesuńTeraz, informując ją, że slajd numer 1 jest w jej polu widzenia: slajdTeraz = 1;

Ten sam warunek obejmuje sprawdzenie, czy numer slajdu, który widzimy, mieści się w granicach liczby naszych slajdów, jeśli jakoś nie zostanie to spełnione, wrócimy do pierwszego slajdu.

Jeśli pierwszy warunek nie jest spełniony, oznacza to, że jesteśmy włączeni ten moment nie jesteśmy na ostatnim slajdzie lub na jakimś nieistniejącym, co oznacza, że ​​musimy przełączyć się na następny, zrobimy to przesuwając slajd w lewo o wartość równą szerokości rzutnia, przemieszczenie nastąpi ponownie poprzez znaną właściwość Tłumaczyć którego wartość będzie równa "translate (" + translateWidth + "px, 0)", gdzie tłumaczSzerokość- odległość, o jaką nasz slajd... Przy okazji zadeklarujmy tę zmienną na początku naszego kodu:

Po przejściu do następnego slajdu powiedz naszemu slajdowiTeraz widzimy następny slajd: slajdTeraz ++;

W tej chwili niektórzy czytelnicy mogą mieć pytanie: dlaczego nie wymieniliśmy $ („# widoczny obszar”). szerokość () do jakiejś zmiennej, na przykład szerokość slajdu mieć zawsze pod ręką szerokość naszej zjeżdżalni? Odpowiedź jest bardzo prosta, jeśli nasza strona jest responsywna, to odpowiednio blok przydzielony dla suwaka jest również adaptacyjny, z tego można zrozumieć, że przy zmianie rozmiaru szerokości okna bez przeładowywania strony (na przykład obracanie telefon bokiem), szerokość rzutnia zmieni się, a zatem zmieni się również szerokość jednego slajdu. W tym przypadku nasz slajd zostanie przesunięta o wartość szerokości, która była pierwotnie, co oznacza, że ​​obrazy będą wyświetlane w częściach lub w ogóle nie będą wyświetlane w rzutnia... Pisząc do naszej funkcji $ („# widoczny obszar”). szerokość () zamiast szerokość slajdu każemy mu obliczać szerokość za każdym razem, gdy zmieniamy slajdy rzutnia, zapewniając w ten sposób przewinięcie do żądanego slajdu, gdy szerokość ekranu zmienia się gwałtownie.

Jednak napisaliśmy funkcję, teraz musimy ją wywołać po pewnym przedziale czasowym, możemy też przechowywać interwał w zmiennej, aby jeśli chcemy to zmienić, zmień tylko jedną wartość w kodzie:

Czas w js jest podawany w milisekundach.

Napiszmy teraz następującą konstrukcję:

Nigdzie nie jest prostsze, jesteśmy w trakcie budowy $ (dokument) .gotowy (funkcja () ()) mówimy, że po pełnym załadowaniu dokumentu należy wykonać następujące czynności. Następnie po prostu wywołujemy funkcję Następny slajd z przedziałem równym slajdInterwał, korzystając z wbudowanej funkcji ustaw interwał.

Po wszystkich czynnościach, które wykonaliśmy powyżej, nasz suwak powinien się dobrze obracać, ale jeśli coś poszło nie tak, problem może dotyczyć wersji jQuery, albo w złe połączenieżadnych plików. Nie trzeba też wykluczać, że mogłeś popełnić błąd gdzieś w kodzie, więc radzę tylko sprawdzić wszystko dokładnie.


W międzyczasie przejdź dalej, dodaj do naszego slidera taką funkcję jak zatrzymaj przewijanie po najechaniu kursorem, do tego musimy wpisać w głównym bloku kodu (wewnątrz $ (dokument) .gotowy (funkcja () ())) takie coś:

Aby rozpocząć analizę tego kodu, musimy wiedzieć, co to jest interwał przełącznika... Po pierwsze, jest to zmienna przechowująca okresowe wywołanie funkcji nextSlide, w uproszczeniu używamy tego wiersza kodu: setInterval (nextSlide, slideInterval);, przekształcone w to: switchInterval = setInterval (nextSlide, slideInterval);... Po tych manipulacjach nasz główny blok kodu przybrał następującą postać:

Tutaj używam zdarzenia unosić się, co oznacza „najechanie”, to zdarzenie pozwala mi śledzić moment, w którym najeżdżam na obiekt, w tym przypadku na rzutnia.

Po najechaniu usuwam odstępy, które wskażę w nawiasach (to jest nasze interwał przełącznika), następnie oddzielone przecinkami piszę, co zrobię, gdy cofnę kursor, w tym bloku ponownie przypisuję do naszego interwał przełącznika okresowe wywołanie funkcji Następny slajd.

Teraz, jeśli sprawdzimy, zobaczymy, jak nasz suwak reaguje na najechanie myszą, zatrzymując przełączanie suwaków.

Teraz nadszedł czas, aby dodać przyciski do naszego suwaka, zacznijmy od przycisków wstecz i do przodu.

Przede wszystkim oznaczmy je:

Na początku ten znacznik może być niezrozumiały, od razu powiem, że zawinąłem te dwa guziki w jeden div z klasą poprzedni-następny-btns tylko dla Twojej wygody nie musisz tego robić, wynik się nie zmieni, teraz dodamy do nich style i wszystko stanie się jasne:

Najpierw ustawiamy nasze przyciski przez pozycja: bezwzględna, dzięki czemu będziemy mogli swobodnie kontrolować ich pozycję w naszym rzutnia, wtedy wskażemy rozmiary tych przycisków i używając promień-granicy zaokrąglij rogi, aby te przyciski zamieniły się w kółka. Ich kolor będzie biały, to znaczy #ffff, a ich wcięcie od górnej krawędzi rzutnia będzie równa połowie wysokości tego rzutnia minus połowa wysokości samego przycisku (w moim przypadku 25px), dzięki czemu możemy ustawić je pionowo na środku. Następnie wskażemy, że po najechaniu na nie kursor zmieni się na wskaźnik i na koniec powiedz naszym przyciskom indywidualnie, aby wcięły 20 pikseli od ich krawędzi, abyśmy mogli je zobaczyć, jak uznamy za stosowne.

Ponownie, możesz dowolnie stylizować elementy strony, podaję tylko przykład stylów, które zdecydowałem się użyć.

Po stylizacji nasz slider powinien wyglądać mniej więcej tak:


Następnie wróć do naszego plik js gdzie opisujemy, jak działają nasze przyciski. No to dodajmy jeszcze jedną funkcję, pokaże nam poprzedni slajd:

Nazywa się to poprzedni slajd, zostanie wywołane dopiero po kliknięciu poprzedni-btn... Najpierw sprawdzamy, czy jesteśmy na pierwszym slajdzie, czy nie, tutaj również sprawdzamy, czy nasz przesuńTeraz poza granice realnego zasięgu naszych zjeżdżalni i jeśli któryś z warunków zadziała, do ostatniego zjeżdżalni przejdziemy przesuwając slajd do wartości, której potrzebujemy. Obliczymy tę wartość według wzoru: (szerokość jednego slajdu) * (liczba slajdów - 1), to wszystko bierzemy ze znakiem minus, ponieważ przesuwamy go w lewo, okazuje się, że rzutnia pokaże nam teraz ostatni slajd. Na końcu tego bloku musimy również podać zmienną przesuńTerazże ostatni slajd jest teraz w naszym polu widzenia.

Jeśli nie jesteśmy na pierwszym slajdzie, musimy cofnąć się o 1, w tym celu ponownie zmieniamy właściwość przekształć w slajd... Formuła jest następująca: (szerokość jednego slajdu) * (numer bieżącego slajdu - 2), znowu bierzemy to wszystko ze znakiem minus. Ale dlaczego -2, a nie -1, czy musimy cofnąć się tylko o 1 przesunięcie? Faktem jest, że jeśli jesteśmy, powiedzmy, na drugim slajdzie, to zmienna x nieruchomości transformacja: przetłumacz (x, 0) nasz slajd jest już równa szerokości jednego slajdu, jeśli powiemy mu, że musimy od numeru bieżącego slajdu odjąć 1, to ponownie otrzymamy jednostkę, o którą jest już przesunięty slajd, więc będziesz musiał przesunąć te szerokości o 0 rzutnia, co oznacza na slideNow - 2.

Teraz wystarczy dodać te wiersze do głównego bloku kodu:

Tutaj po prostu śledzimy, czy nastąpiło kliknięcie na naszych przyciskach, w tym przypadku wywołujemy potrzebne nam funkcje, wszystko jest proste i logiczne.

Teraz dodajmy przyciski nawigacji po slajdach, wracając do znaczników:

Jak widać, w środku rzutnia pojawiła się zagnieżdżona lista, nadaj jej identyfikator nav-btns, w środku tego Li- nasze przyciski nawigacyjne, przypiszemy im klasę slide-nav-btn, możemy jednak zakończyć ze znacznikami, przejdźmy do stylów:

Blok nav-btns, w którym znajdują się nasze przyciski, podajemy właściwość pozycja: bezwzględna, żeby się nie rozciągał rzutnia wzrost, ponieważ w slajd własność pozycja: względna, ustawiamy szerokość na 100%, aby używając wyrównanie tekstu: środekśrodkowe przyciski poziomo względem siebie rzutnia, a następnie za pomocą właściwości na dole wyjaśniamy naszemu blokowi, że powinien znajdować się w odległości 20px od dolnej krawędzi.

Z przyciskami robimy to samo, co z slajdami, ale teraz je ustawiamy wyświetlacz: inline-block odkąd w wyświetlacz: wbudowany nie reagują na szerokość oraz wzrost odkąd znajdują się w bezwzględnie pozycjonowanym bloku. Zrobimy je białe i z pomocą już nam znanych promień-granicy nadajmy im kształt koła. Po najechaniu na nie zmienimy wygląd naszego kursora na zwykły wyświetlacz.

Teraz przejdźmy do jQuery - części:
Najpierw zadeklarujmy zmienną navBtnId, która będzie przechowywać indeks klikniętego przycisku:

Oto jesteśmy po kliknięciu naszego slide-nav-btn wywołujemy funkcję, która przede wszystkim przypisuje zmiennej navBtnId indeks klikniętego przycisku, czyli jego liczba porządkowa, ponieważ liczenie zaczyna się od zera, to jeśli klikniemy drugi przycisk, to w navBtnId wartość jest zapisywana 1. Następnie sprawdzamy, gdzie do liczby porządkowej przycisku dodajemy jeden, aby uzyskać taką liczbę, jakby odliczanie nie było od 0, ale od 1, porównujemy tę liczbę z numer aktualnego slajdu, jeśli się pokrywają, nie podejmiemy żadnych działań, ponieważ żądany slajd jest już w rzutnia.

Jeśli potrzebny nam slajd jest poza zasięgiem wzroku rzutnia, następnie obliczamy odległość, o jaką musimy się przesunąć slajd po lewej stronie, a następnie zmień wartość właściwości transformacji css na translate(ta sama odległość w pikselach, 0). Robiliśmy to już nie raz, więc nie powinno być pytań. Na koniec ponownie zapisujemy wartość bieżącego slajdu do zmiennej. przesuńTeraz, wartość tę można obliczyć, dodając jeden do indeksu klikniętego przycisku.

To wszystko, w zasadzie jeśli coś nie jest jasne, to zostawiam link do jsfiddle, gdzie będzie podany cały kod napisany w materiale.

Dziękuję za uwagę!

Tagi:

• suwak jquery
• css
• animacja css3
• html

Prosty, lekki (21Kb skompresowany) slider napisany w czystym JavaScript, bez żadnych zależności, tj. działa bez jQuery.

Testowane w następujących przeglądarkach:

• Chrom 26,0
• Firefox 20,0
• Safari 5.1.7
• IE 10
• Opera 16,0

Jest niepełna obsługa IE8 / 9 (brak efektów).

Osobliwości

• Możesz dodać do strony nieograniczoną liczbę suwaków, a nawet umieścić jeden w drugim.
• Zmienia rozmiar na podstawie zawartości, ale można go wyłączyć.
• Nawigacja za pomocą klawiatury — gdy kursor znajduje się na suwaku, możesz przełączać suwaki strzałek.
• Wsparcie dla mobilnych zdarzeń dotykowych.

Połączenie

Przed tagiem zamykającym trzeba się połączyć slidr.js lub slidr.min.js plik.

znaczniki HTML

slidr.js może pracować z dowolnymi elementami śródliniowymi, blokowymi i blokowymi, które mają atrybut id. Dozwolone jest użycie dowolnych elementów potomnych pierwszego poziomu z atrybutem data-slidr, na przykład:

• jabłko
• banan
• orzech kokosowy

JavaScript

Po podłączeniu slidr.js globalny obiekt slider stanie się dostępny. Najłatwiejszym sposobem na stworzenie slidera jest:

Slidr.create ("slidr-id"). Start ();

Zadzwoń ze wszystkimi ustawieniami:

Slidr.create ("slidr-id", (po: function (e) (console.log ("in:" + e.in.slidr);), przed: function (e) (console.log ("out: "+ e.out.slidr);), bułka tarta: prawda, kontrolki:" narożnik ", kierunek: "pion", zanikanie: fałsz, klawiatura: prawda, przepełnienie: prawda, motyw:" # 222 ", czas: (" kostka ":" 0.5s luz "), dotyk: prawda, przejście:" kostka ")). start ();

Ustawienia

Wszystkie dostępne ustawienia dla slidr.js są pokazane w poniższej tabeli.

Funkcje wywołania zwrotnego after i before otrzymują następujące dane:

(id: "slidr-id", w: (el: # , slidr: "data-slidr-in", trans: "transition-in", dir: "direction-in"), out: (el: # , slidr: "data-slidr-out", trans: "transition-out", dir: "direction-out"))

Globalny interfejs API Slider.js

Globalna przestrzeń nazw slider zapewnia następującą funkcjonalność:

/ ** * Aktualna wersja * @return (string) major.minor.patch. * / wersja funkcji () (); / ** * Dostępne efekty przejścia. * @return (tablica) przejść. * / przejścia funkcji () (); / ** * Tworzy i zwraca Slider. * Dwukrotne wywołanie tej funkcji na tym samym elemencie zwróci już utworzony obiekt Slidr. * Identyfikator elementu @param (string) dla Slidr. * @param (Object =) opt_settings Ustawienia suwaka. * / tworzenie funkcji (id, opt_settings) ();

API suwaka

Krótki wpis

Var s = slidr.create ("slidr-api-demo", (bułka tarta: prawda, przepełnienie: prawda)). Dodaj ("h", ["jeden", "dwa", "trzy", "jeden"]) .add ("v", ["pięć", "cztery", "trzy", "pięć"], "kostka") .start ();

Pełna lista funkcji API Slider.js znajduje się poniżej.

/ ** * Uruchom Slider! * Automatycznie wyszukuje slajdy do utworzenia, jeśli nic nie zostało dodane przed wywołaniem start (). * @param (string) opt_start `data-slidr` id do rozpoczęcia. * @return (to) * / start funkcji (opt_start) (); / ** * Sprawdź, czy możemy się ślizgać. * @param (string) obok kierunku ("góra", "dół", "lewo", "prawo") lub identyfikator `data-slidr`. * @return (boolean) * / funkcja canSlide (następny) (); / ** * Ślizgać się! * @param (string) obok kierunku ("góra", "dół", "lewo", "prawo") lub identyfikator `data-slidr`. * @return (to) * / slajd funkcji (następny) (); / ** * Dodaje zestaw slajdów. * @param (string) direction `horizontal || h` lub `vertical || v`. * @param (Array) ids Lista identyfikatorów `data-slidr` do dodania do Slidr. Slajdy muszą być bezpośrednimi dziećmi Slidr. * @param (string =) opt_transition Przejście do zastosowania między slajdami lub użycia wartość domyślna * @param (boolean =) opt_overwrite Czy nadpisywać istniejące odwzorowania slajdów / przejścia w przypadku wystąpienia konfliktów * @return (this) * / function add (direction, ids, opt_transition, opt_overwrite) (); / ** * Automatycznie przejście do następnego slajdu po określonym czasie.Wywołuje start(), jeśli jeszcze nie zostało wywołane. * @param (int =) opt_msec Liczba milisekund między każdym przejściem slajdów. Domyślnie 5000 (5 sekund) * @param (string = ) opt_direction "up", "down", "left" lub "right". Domyślnie "right". * @param (string =) opt_start Identyfikator `data-slidr`, od którego ma się zaczynać (działa tylko wtedy, gdy wywołane jest auto aby uruchomić suwak).* @return (this) * / function auto (opt_msec, opt_direction, opt_start) ();/** * Zatrzymaj automatyczne przejście, jeśli jest włączone. * @return (to) * / funkcja stop () (); / ** * Ustaw niestandardowe czasy animacji. * @param (string | Object) transition Nazwa przejścia (np. "kostka") lub obiekt ("transition": "timing"). * @param (string =) opt_timing Nowy czas animacji (tj. "0,5 s złagodzenie"). Niewymagane, jeśli przejście jest obiektem. * @return (this) * / czas funkcji (przejście, opt_timing) (); / ** * Przełącz bułkę tartą. * @return (to) * / funkcja bułka tarta () (); / ** * Przełącz sterowanie. * @param (string =) opt_scheme Włącz / wyłącz, jeśli nie występuje, w przeciwnym razie zmień układ. „granica”, „róg” lub „brak”. * @return (to) * / kontrolki funkcji (opt_scheme) ();

Przewijanie strony podczas zmiany slajdów

Ten paskudny błąd pojawia się w niektórych przeglądarkach. Aby to naprawić, musisz dodać styl do ciała:

Body (przepełnienie: ukryte;)

Dynamiczna zmiana rozmiaru

Slider „rozumie”, czy suwak musi zostać zmieniony, aby dopasować go do obrazu. Jeśli blok suwaka ma określone wymiary, to Slider nie zmieni ich automatycznie. Jeśli określono właściwości min-width i min-height, suwak zmieni rozmiar, aby dopasować się do zawartości, biorąc pod uwagę te wartości. W przeciwnym razie wymiarowanie zostanie wykonane automatycznie.

Automatyczna zmiana rozmiaru

Wymiary statyczne

Sterowanie suwakiem

Znacznik dla kontrolek jest następujący:

Możesz dostosować dowolny suwak za pomocą selektorów CSS:

Na bok .slidr-control.right (szerokość: 50px! Ważne; wysokość: 50px! Ważne; góra: 50%! Ważne; margines górny: -25px! Ważne; prawy: -25px! Ważne; border-radius: 25px; tło : url ("/ static / images / arrow_right.png") 14px 13px bez powtórzeń czarny; krycie: 0.4;) na bok .slidr-control.right: hover (krycie: 1;)

Kontrolka strzałki jest zaimplementowana za pomocą selektora: after pseudo, więc aby ją ukryć, użyj następującego kodu:

// Ukryj pojedynczą strzałkę w jednym kontrolerze. na bok .slidr-control.right: after (border-color: transparent! ważne;) // Ukryj wszystkie strzałki w jednym kontrolerze. na bok .slidr-control: after (border-color: transparent! ważne;) // Ukryj wszystkie strzałki Slidr. na bok .slidr-control: after (border-color: transparent! ważne;)

Slider bułka tarta

Bułka tarta ma proste znaczniki HTML. Każdy ul oznacza całą linię, a każde li osobną bułkę tartą:

Stylizowanie bułki tartej za pomocą CSS:

// Dostosuj pozycję, rozmiar, kolor obramowania i kolor tła. na bok (po prawej: 50%! ważne; margines po prawej: -41px! ważne;) na bok .slidr-bułka tarta li (szerokość: 15px! ważne; wysokość: 15px! ważne; margines: 3px! ważne;) na bok .slidr-bułka tarta li.normal (kolor-obramowania: biały! ważne;) na bok .slidr-bułka tarta li.active (kolor-tła: czarny! ważne;)

Licencja

To oprogramowanie jest bezpłatne na licencji MIT.

Czas nie stoi w miejscu, a wraz z nim postęp. Wpłynęło to również na ogrom Internetu. Już teraz widać, jak zmienia się wygląd stron, szczególnie popularny jest responsywny design. I pod tym względem pojawiło się sporo nowych. responsywne suwaki jquery, galerie, karuzele lub podobne wtyczki.
1. Responsywny suwak poziomych słupków

Adaptacyjna karuzela pozioma ze szczegółowymi instrukcjami instalacji. Jest wykonany w prostym stylu, ale możesz go wystylizować tak, jak lubisz.

2. Suwak na Glide.js

Ten suwak jest odpowiedni dla każdej witryny. Używa open source Glide.js. Kolory suwaków można łatwo zmieniać.

3. Pokaz slajdów z przekrzywioną treścią

Responsywny suwak treści. Najważniejszym elementem tego suwaka jest efekt 3D obrazów, a także różne animacje wyglądu w losowej kolejności.

4. Suwak przy użyciu płótna HTML5

Bardzo ładny i efektowny slider z interaktywnymi cząsteczkami. Jest wykonywany przy użyciu płótna HTML5,

5. Suwak „Morfowanie obrazów”

Suwak z efektem morfingu (Płynna transformacja z jednego obiektu do drugiego). W tym przykładzie suwak dobrze sprawdza się w portfolio twórcy stron internetowych lub studiu internetowym jako portfolio.

6. Okrągły suwak

Suwak w kształcie koła z efektem odwracania obrazu.

7. Suwak rozmytego tła

Adaptacyjny suwak z przełączaniem i rozmyciem tła.

8. Adaptacyjny suwak mody

Prosty, lekki i responsywny suwak strony internetowej.

9. Slicebox - suwak obrazu 3D jQuery(AKTUALIZOWANE)

Zaktualizowana wersja suwaka Slicebox z poprawkami i nowymi funkcjami.

10. Bezpłatna animowana siatka responsywnego obrazu

Wtyczka jQuery do tworzenia elastycznej siatki obrazów, która będzie przełączać ujęcia przy użyciu różnych animacji i czasów. Świetnie sprawdzi się jako tło lub element dekoracyjny na stronie, ponieważ możemy dostosować wygląd nowych obrazów i ich przejścia. Wtyczka jest wykonana w kilku wersjach.

11. Flexslider

Uniwersalna darmowa wtyczka do Twojej witryny. Ta wtyczka zawiera kilka opcji suwaków i karuzeli.

12. Ramka na zdjęcia

Fotorama to wszechstronna wtyczka. Posiada wiele ustawień, wszystko działa szybko i łatwo, jest możliwość podglądu slajdów na pełnym ekranie. Suwak może być używany zarówno w stałym rozmiarze, jak i responsywnym, z miniaturami lub bez, z przewijaniem kołowym lub bez, i wiele więcej.

PSSuwak włożyłem kilka razy i uważam, że jest jednym z najlepszych

13. Darmowy i responsywny suwak galerii 3D z miniaturami.

Eksperymentalny suwak galerii Układ panelu 3D z siatką i ciekawymi efektami animacji.

14. Suwak na CSS3

Responsywny suwak jest wykonany w CSS3 z płynnym przepływem treści i lekką animacją.

15. Suwak WOW

Suwak Wow to suwak obrazu z niesamowitą grafiką.

17. Elastyczny

W pełni responsywny, elastyczny suwak z miniaturkami slajdów.

18. Szczelina

Jest to responsywny suwak pełnoekranowy wykorzystujący animację CSS3. Suwak wykonany jest w dwóch wersjach. animacja jest dość niezwykła i piękna.

19.Adaptacyjna galeria zdjęć plus

Prosta, bezpłatna galeria suwaków z przesłanymi obrazami.

20. Responsywny suwak dla WordPress

Responsywny darmowy suwak dla WP.

21. Suwak zawartości paralaksy

Suwak z efektem paralaksy i kontrolą każdego elementu za pomocą CSS3.

22. Suwak z łączeniem muzyki

Slider przy użyciu JPlayera o otwartym kodzie źródłowym. Ten suwak przypomina prezentację z muzyką.

23. Suwak z jmpress.js

Responsywny suwak jest oparty na jmpress.js i dlatego pozwala na użycie fajnych efektów 3D na slajdach.

24. Szybki pokaz slajdów

Pokaz slajdów z szybkim przełączaniem slajdów. Slajdy włączają się.

25. Akordeon obrazu z CSS3

Akordeon obrazów z wykorzystaniem CSS3.

26. Zoptymalizowana dotykowo wtyczka galerii

Jest to responsywna galeria zoptymalizowana pod kątem urządzeń dotykowych.

Galeria 27,3D

Galeria ścian 3D- stworzony dla przeglądarki Safari, gdzie będzie widoczny efekt 3D. W przypadku oglądania w innej przeglądarce funkcjonalność będzie w porządku, ale efekt 3D nie będzie widoczny.

28. Suwak paginacji

Responsywny suwak paginacji z suwakiem jQuery UI. chodzi o zastosowanie prostej koncepcji nawigacji. Możliwe jest przewijanie wszystkich obrazów lub przełączanie slajd po slajdzie.

29. Montaż obrazu za pomocą jQuery

Automatyczne pozycjonowanie obrazów na podstawie szerokości ekranu. Bardzo przydatna rzecz przy tworzeniu strony z portfolio.

Galeria 30,3D

Prosty okrągły suwak 3D w CSS3 i jQuery.

31. Tryb pełnoekranowy z efektem 3D w css3 i jQuery

Suwak pełnoekranowy z pięknymi przejściami.

Potrzebujemy prostego slidera z automatycznym przewijaniem. Zacznijmy ...

Opis pracy slidera.

Slajdy zostaną ułożone i przewinięte po pewnym czasie.

Czerwona ramka pokazuje widoczną część suwaka.

Na końcu suwaka musisz zduplikować pierwszy slajd. Jest to konieczne, aby zapewnić przewijanie od trzeciego do pierwszego slajdu. Musisz także dodać ostatni slajd na początku, aby móc przewijać wstecz od pierwszego do trzeciego. Poniżej pokazano, jak suwak działa w kierunku do przodu.

Gdy suwak dojdzie do końca, kopia z początku suwaka jest natychmiast umieszczana w miejscu ostatniego slajdu. Następnie cykl się powtarza. Stwarza to iluzję niekończącego się suwaka.

znaczniki HTML

Najpierw zróbmy prosty suwak automatycznego przewijania. Do pracy potrzebne są dwa pojemniki. Pierwszy ustawi rozmiar widocznego obszaru suwaka, a drugi jest potrzebny do umieszczenia w nim suwaków. Suwak będzie wyglądał tak:

> >

Style suwaków

.slider-box (szerokość: 320px; wysokość: 210px; przepełnienie: ukryte;) .slider (pozycja: względne; szerokość: 10000px; wysokość: 210px;) .slider img (float: lewo; z-index: 0;)

Kontener.slider-box ustawia wymiary suwaka. Właściwość overflow: hidden ukrywa wszystkie elementy, które nie mieszczą się w obszarze wewnątrz elementu.

Suwak jest ustawiony na dużą szerokość. Jest to konieczne, aby zmieściły się w nim wszystkie slajdy.

Slajdy są wyrównywane za pomocą właściwości float: left.

Poniżej schematyczny układ bloków suwaka.

Scenariusz

Ruch slajdów będzie się odbywał poprzez płynną zmianę właściwości marginesu lewego suwaka kontenera.

$ (funkcja () (var width = $ (". slider-box") .width (); // Szerokość suwaka. interwał = 4000; // Interwał na zmianę slajdów.$ (". slider img: ostatni") .clone () .prependTo (.slider"); // Kopia ostatniego slajdu jest umieszczana na początku.$() .eq (1) .clone() .appendTo (.slider"); // Kopia pierwszego slajdu jest umieszczana na końcu. // Suwak kontenera jest przesuwany w lewo o jedną szerokość slajdu. setInterval („animacja ()”, interwał); // Funkcja animacji () jest uruchamiana w celu zmiany slajdów.)); animacja funkcji () (var margin = parseInt ($ (". suwak") .css ("marginLeft")); // Bieżące przesunięcie bloku.Suwak szerokość = $ (". slider-box") .width (), // Szerokość suwaka. slidersAmount = $ (". slider") .children () .length; // Liczba slajdów w suwaku. if (marża! = (- szerokość * (slidersAmount- 1))) // Jeśli bieżący slajd nie jest ostatnim,(margin = szerokość marginesu; // wtedy wartość marginesu zostanie zmniejszona o szerokość slajdu.) w przeciwnym razie ( // Jeśli pokazany jest ostatni slajd,$ (". suwak") .css ("margines-lewy", - szerokość); // wtedy bloczek suwaka wraca do pozycji wyjściowej, margines = - szerokość * 2; ) $ (". suwak") .animate ((marginLeft: margines), 1000); // Blok suwaka jest przesunięty w lewo o 1 slajd. } ;

Rezultatem jest prosty suwak z nieskończonym automatycznym przewijaniem.

Na początek ten artykuł został napisany w celu poinformowania Cię, jak utworzyć suwak przewijania obrazu dla stron internetowych. Ten artykuł nie ma charakteru edukacyjnego, służy jedynie jako przykład tego, jak możesz zrealizować nasz przedmiot rozważań. Możesz użyć kodu podanego w tym artykule jako swoistego szablonu dla takich zmian, mam nadzieję, że będę w stanie przekazać czytelnikowi całą esencję tego, co napisałem, wystarczająco szczegółowo i w przystępny sposób.

A teraz do rzeczy, nie tak dawno musiałem umieścić suwak na jednej stronie, ale po przeszukaniu internetu w poszukiwaniu gotowych skryptów nie znalazłem nic wartościowego. niektóre nie działały tak jak potrzebowałem, podczas gdy inne w ogóle nie uruchamiały się bez błędów w konsoli. Posługiwać się jQuery - wtyczki wydawało mi się to zbyt nieciekawe dla suwaka, tk. Chociaż rozwiążę tym problem, nie będę miał zrozumienia działania tego mechanizmu, a korzystanie z wtyczki ze względu na jeden slider nie jest zbyt optymalne. Nie bardzo chciałem też rozumieć krzywe skrypty, dlatego postanowiłem napisać własny skrypt do slidera, który sam będę zaznaczał tak, jak potrzebuję.

Na początek musimy zdecydować się na logikę samego slidera, a następnie przejść do implementacji, na tym etapie bardzo ważne jest jasne zrozumienie działania tego mechanizmu, ponieważ bez niego nie możemy napisać kodu, który działa dokładnie tak, jak chcemy.

Naszym głównym celem będzie rzutnia czyli klocek w którym zobaczymy jak wirują nasze zdjęcia, w nim będziemy mieli slajd, będzie to nasz blok zawierający wszystkie obrazy, ułożone w jednej linii, który zmieni swoją pozycję wewnątrz samego rzutnia.


Dalej po bokach wewnątrz rzutnia, pionowo pośrodku, będą umieszczone przyciski wstecz i dalej, po kliknięciu których zmienimy również położenie naszego slajd stosunkowo rzutnia, powodując w ten sposób efekt przewijania zdjęć. I wreszcie ostatnim obiektem będą nasze przyciski nawigacyjne znajdujące się na dole. rzutnia.


Klikając na nie, po prostu spojrzymy na numer seryjny tego przycisku i przejdziemy do potrzebnego nam slajdu, ponownie przesuwając slajd(przesunięcie zostanie wykonane poprzez zmianę) przekształć właściwości CSS, którego wartość będzie stale obliczana).

Myślę, że logika całej tej sprawy powinna być jasna po tym, co napisałem powyżej, ale jeśli nadal gdzieś są nieporozumienia, to wszystko zostanie wyjaśnione w poniższym kodzie, wystarczy trochę cierpliwości.

Teraz napiszmy! Przede wszystkim otworzymy nasze plik indeksu i napisz tam potrzebne nam znaczniki:

• 
• 
• 
• 

Jak widać nic skomplikowanego blok-za-suwak służy jako ten sam blok, w którym zostanie umieszczony nasz slider, w nim samym rzutnia w którym nasz slajd, czyli lista zagnieżdżona, tutaj Li są slajdy i obrazek- zdjęcia w nich. Proszę zwrócić uwagę, że wszystkie zdjęcia muszą mieć ten sam rozmiar lub przynajmniej proporcje, w przeciwnym razie suwak będzie wyglądał krzywo, tk. jego wymiary zależą bezpośrednio od proporcji obrazu.

Teraz musimy to wszystko wystylizować, zazwyczaj style nie są tak naprawdę komentowane, ale postanowiłem zwrócić na to uwagę, aby w przyszłości nie było nieporozumień.

body (margin: 0; padding: 0;) # block-for-slider (szerokość: 800px; margines: 0 auto; margin-top: 100px;) #viewport (szerokość: 100%; wyświetlacz: tabela; pozycja: względna; przepełnienie: ukryte; -webkit-user-select: brak; -moz-user-select: brak; -ms-user-select: brak; -o-user-select: brak; użytkownik-select: brak;) #slidewrapper ( pozycja: względna; szerokość: calc (100% * 4); góra: 0; lewy: 0; margines: 0; dopełnienie: 0; -webkit-transition: 1s; -o-transition: 1s; przejście: 1s; -webkit -funkcja czasu przejścia: złagodzenie wejścia; -o-funkcja czasu przejścia: złagodzenie wejścia; funkcja czasu przejścia: złagodzenie;) #slidewrapper ul, #slidewrapper li (marża : 0; padding: 0;) #slidewrapper li (szerokość: calc (100% / 4); styl listy: brak; display: inline; float: left;) .slide-img (szerokość: 100%;)

Zacznijmy blok-za-suwak, to znowu jest nasz blok na stronie, który odłożymy na suwak, jego wysokość będzie zależeć od jego szerokości i proporcji naszego obrazu, ponieważ rzutnia zajmuje całą szerokość blok-za-suwak wtedy ja ślizgać się ma taką samą szerokość, a zatem obraz w nim zmienia swoją wysokość w zależności od szerokości (proporcje są zachowane). Umieściłem ten element poziomo na środku mojej strony, dopełniając 100px od góry, dzięki czemu jego położenie jest wygodniejsze na przykład.

Element rzutnia, jak już wspomniano, zajmuje całą szerokość naszego blok-za-suwak, ma właściwość przepełnienie: ukryte, pozwoli nam to ukryć nasz kanał obrazu, który wyskoczy z widoku.


Następny właściwość css - wybór użytkownika: brak, pozwala pozbyć się niebieskiego zaznaczenia poszczególnych elementów suwaka za pomocą wielu kliknięć przycisków.

Przejść do slajd Czemu pozycja: względna, ale nie absolutny? Wszystko jest bardzo proste, tk. jeśli wybierzemy drugą opcję, to z właściwością Przepełnienie rzutni: ukryte absolutnie nic nam się nie wyda, tk. ja rzutnia nie dostosuje się do wzrostu slajd, bo co będzie miał wysokość: 0... Dlaczego szerokość ma tak duże znaczenie i dlaczego w ogóle ją ustawiamy? Faktem jest, że nasze slajdy będą miały szerokość równą 100% widocznego obszaru, a żeby ułożyć je w linii potrzebujemy miejsca, w którym będą stać, a więc szerokość slajd powinno być równe 100% szerokości widocznego obszaru pomnożona przez liczbę slajdów (w moim przypadku 4). Dotyczący przemiana oraz funkcja czasu przejściowego to tutaj 1s oznacza, że ​​zmiana pozycji slajd nastąpi w ciągu 1 sekundy i będziemy to obserwować, oraz wyluzować- rodzaj animacji, w której najpierw jedzie powoli, przyspiesza do środka, a potem znowu zwalnia, tu już możesz ustawić wartości według własnego uznania.

Kolejny blok zestawów właściwości slajd a jego dzieci mają zero padding, komentarze są tutaj niepotrzebne.

Następnie stylizujemy nasze slajdy, ich szerokość powinna być równa szerokości. rzutnia, lecz odkąd są w slajd, którego szerokość jest równa szerokości okienka ekranu pomnożonej przez liczbę slajdów, a następnie uzyskać szerokość rzutnia znowu potrzebujemy 100% szerokości slajd podziel przez liczbę slajdów (w moim przypadku znowu przez 4). Następnie zamieniamy je w elementy inline za pomocą wyświetlacz: wbudowany i ustaw przepływ w lewo, dodając właściwość pływak: w lewo... O styl listy: brak Mogę powiedzieć, że używam go do usunięcia domyślnego znacznika z Li, w większości przypadków jest rodzajem standardu.

Z slajd-obraz wszystko jest proste, obrazek zajmie całą szerokość ślizgać się, ślizgać się dopasowuje się do swojej wysokości, slajd dopasowuje się do wzrostu ślizgać się, a wysokość rzutnia z kolei przyjmie wartość wysokości slajd, zatem wysokość naszego slidera będzie zależeć od proporcji obrazu i wielkości bloku przewidzianego dla slidera, o czym pisałem już powyżej.

Myślę, że w tym miejscu ustaliliśmy style, zróbmy na razie prosty pokaz slajdów bez przycisków, a po upewnieniu się, że działa poprawnie, dodajmy je i stylizujmy.

Otwórzmy nasze plik js, który będzie zawierał kod suwaka, nie zapomnij dołączyć jQuery odkąd będziemy pisać za pomocą tego frameworka. Nawiasem mówiąc, w chwili pisania tego tekstu używam wersji jQuery 3.1.0... Plik z samym skryptem musi znajdować się na samym końcu tagu ciało odkąd będziemy pracować z elementami DOM, które należy najpierw zainicjować.

Na razie musimy zadeklarować kilka zmiennych, jedna będzie przechowywać numer slajdu, który widzimy w określonym momencie w rzutnia, nazwałem ją przesuńTeraz, a drugi zapisze liczbę tych samych slajdów, to jest slajdCount.

var slajdTeraz = 1; var slideCount = $ („# slidewrapper”). children (). length);

Zmienny przesuńTeraz konieczne jest ustawienie wartości początkowej 1, ponieważ gdy strona się załaduje, na podstawie naszych znaczników zobaczymy pierwszy slajd w rzutnia.

V slajdCount podamy liczbę dzieci slajd, tutaj wszystko jest logiczne.
Następnie musisz stworzyć funkcję, która będzie odpowiedzialna za przełączanie slajdów z prawej na lewą, zadeklarujemy ją:

funkcja nextSlide () ()

Wywołamy to w głównym bloku naszego kodu, do którego dojdziemy, ale na razie powiemy naszej funkcji, co ma zrobić:

function nextSlide () (if (slideNow == slideCount || slideNow<= 0 || slideNow >slideCount) ($ ("# slidewrapper"). css ("transform", "translate (0, 0)"); slideNow = 1;) else (translateWidth = - $ ("# viewport"). width () * ( slideNow); $ ("# slidewrapper"). css (("transform": "translate (" + translateWidth + "px, 0)", "-webkit-transform": "translate (" + translateWidth + "px, 0 ) "," -ms-transform ":" przetłumacz ("+ translateWidth +" px, 0) ",)); slideNow ++;))

Najpierw sprawdzamy, czy jesteśmy teraz na ostatnim slajdzie naszego kanału? Aby to zrobić, bierzemy liczbę wszystkich naszych slajdów za pomocą $ ("# slidewrapper"). dzieci (). length i sprawdź to z numerem naszego slajdu, jeśli okażą się równe, to oznacza, że ​​musimy ponownie zacząć pokazywać wstążkę, od 1 slajdu, czyli zmieniamy właściwość przekształcenia css w slajd na przetłumacz (0, 0), przesuwając go w ten sposób do pierwotnej pozycji tak, aby pierwszy slajd pojawił się w naszym polu widzenia, nie zapomnij również o –Webkit i –ms dla odpowiedniego wyświetlania w różnych przeglądarkach (patrz. odniesienie do właściwości CSS). Następnie nie zapomnij zaktualizować wartości zmiennej. przesuńTeraz, informując ją, że slajd numer 1 jest w jej polu widzenia: slajdTeraz = 1;

Ten sam warunek obejmuje sprawdzenie, czy numer slajdu, który widzimy, mieści się w granicach liczby naszych slajdów, jeśli jakoś nie zostanie to spełnione, wrócimy do pierwszego slajdu.

Jeżeli pierwszy warunek nie jest spełniony, to oznacza to, że w tej chwili nie jesteśmy na ostatnim slajdzie, lub na jakimś nieistniejącym, co oznacza, że ​​musimy przejść do następnego, zrobimy to przesuwając slajd w lewo o wartość równą szerokości rzutnia, przemieszczenie nastąpi ponownie poprzez znaną właściwość Tłumaczyć którego wartość będzie równa "translate (" + translateWidth + "px, 0)", gdzie tłumaczSzerokość- odległość, o jaką nasz slajd... Przy okazji zadeklarujmy tę zmienną na początku naszego kodu:

var translateWidth = 0;

Po przejściu do następnego slajdu powiedz naszemu slajdowiTeraz widzimy następny slajd: slajdTeraz ++;

W tej chwili niektórzy czytelnicy mogą mieć pytanie: dlaczego nie wymieniliśmy $ („# widoczny obszar”). szerokość () do jakiejś zmiennej, na przykład szerokość slajdu mieć zawsze pod ręką szerokość naszej zjeżdżalni? Odpowiedź jest bardzo prosta, jeśli nasza strona jest responsywna, to odpowiednio blok przydzielony dla suwaka jest również adaptacyjny, z tego można zrozumieć, że przy zmianie rozmiaru szerokości okna bez przeładowywania strony (na przykład obracanie telefon bokiem), szerokość rzutnia zmieni się, a zatem zmieni się również szerokość jednego slajdu. W tym przypadku nasz slajd zostanie przesunięta o wartość szerokości, która była pierwotnie, co oznacza, że ​​obrazy będą wyświetlane w częściach lub w ogóle nie będą wyświetlane w rzutnia... Pisząc do naszej funkcji $ („# widoczny obszar”). szerokość () zamiast szerokość slajdu każemy mu obliczać szerokość za każdym razem, gdy zmieniamy slajdy rzutnia, zapewniając w ten sposób przewinięcie do żądanego slajdu, gdy szerokość ekranu zmienia się gwałtownie.

Jednak napisaliśmy funkcję, teraz musimy ją wywołać po pewnym przedziale czasowym, możemy też przechowywać interwał w zmiennej, aby jeśli chcemy to zmienić, zmień tylko jedną wartość w kodzie:

var slideInterval = 2000;

Czas w js jest podawany w milisekundach.

Napiszmy teraz następującą konstrukcję:

$ (dokument) .ready (funkcja () (setInterval (nextSlide, slideInterval);));

Nigdzie nie jest prostsze, jesteśmy w trakcie budowy $ (dokument) .gotowy (funkcja () ()) mówimy, że po pełnym załadowaniu dokumentu należy wykonać następujące czynności. Następnie po prostu wywołujemy funkcję Następny slajd z przedziałem równym slajdInterwał, korzystając z wbudowanej funkcji ustaw interwał.

Po wszystkich czynnościach, które wykonaliśmy powyżej, nasz suwak powinien się dobrze obracać, ale jeśli coś poszło nie tak, problem może dotyczyć wersji jQuery lub w złym połączeniu jakichkolwiek plików. Nie trzeba też wykluczać, że mogłeś popełnić błąd gdzieś w kodzie, więc radzę tylko sprawdzić wszystko dokładnie.


W międzyczasie przejdź dalej, dodaj do naszego slidera taką funkcję jak zatrzymaj przewijanie po najechaniu kursorem, do tego musimy wpisać w głównym bloku kodu (wewnątrz $ (dokument) .gotowy (funkcja () ())) takie coś:

$ ("# viewport"). hover (funkcja () (clearInterval (switchInterval);), funkcja () (switchInterval = setInterval (nextSlide, slideInterval);));

Aby rozpocząć analizę tego kodu, musimy wiedzieć, co to jest interwał przełącznika... Po pierwsze, jest to zmienna przechowująca okresowe wywołanie funkcji nextSlide, w uproszczeniu używamy tego wiersza kodu: setInterval (nextSlide, slideInterval);, przekształcone w to: switchInterval = setInterval (nextSlide, slideInterval);... Po tych manipulacjach nasz główny blok kodu przybrał następującą postać:

$ (document) .ready (function () (var switchInterval = setInterval (nextSlide, slideInterval); $ ("# viewport")). hover (function () (clearInterval (switchInterval);), function () (switchInterval = setInterval ( nextSlide, slideInterval);));));

Tutaj używam zdarzenia unosić się, co oznacza „najechanie”, to zdarzenie pozwala mi śledzić moment, w którym najeżdżam na obiekt, w tym przypadku na rzutnia.

Po najechaniu usuwam odstępy, które wskażę w nawiasach (to jest nasze interwał przełącznika), następnie oddzielone przecinkami piszę, co zrobię, gdy cofnę kursor, w tym bloku ponownie przypisuję do naszego interwał przełącznika okresowe wywołanie funkcji Następny slajd.

Teraz, jeśli sprawdzimy, zobaczymy, jak nasz suwak reaguje na najechanie myszą, zatrzymując przełączanie suwaków.

Teraz nadszedł czas, aby dodać przyciski do naszego suwaka, zacznijmy od przycisków wstecz i do przodu.

Przede wszystkim oznaczmy je:

• 
• 
• 
• 

Na początku ten znacznik może być niezrozumiały, od razu powiem, że zawinąłem te dwa guziki w jeden div z klasą poprzedni-następny-btns tylko dla Twojej wygody nie musisz tego robić, wynik się nie zmieni, teraz dodamy do nich style i wszystko stanie się jasne:

# prev-btn, # next-btn (pozycja: bezwzględna; szerokość: 50px; wysokość: 50px; background-color: #fff; border-radius: 50%; top: calc (50% - 25px);) # prev- btn: hover, # next-btn: hover (kursor: wskaźnik;) # prev-btn (po lewej: 20px;) # next-btn (po prawej: 20px;)

Najpierw ustawiamy nasze przyciski przez pozycja: bezwzględna, dzięki czemu będziemy mogli swobodnie kontrolować ich pozycję w naszym rzutnia, wtedy wskażemy rozmiary tych przycisków i używając promień-granicy zaokrąglij rogi, aby te przyciski zamieniły się w kółka. Ich kolor będzie biały, to znaczy #ffff, a ich wcięcie od górnej krawędzi rzutnia będzie równa połowie wysokości tego rzutnia minus połowa wysokości samego przycisku (w moim przypadku 25px), dzięki czemu możemy ustawić je pionowo na środku. Następnie wskażemy, że po najechaniu na nie kursor zmieni się na wskaźnik i na koniec powiedz naszym przyciskom indywidualnie, aby wcięły 20 pikseli od ich krawędzi, abyśmy mogli je zobaczyć, jak uznamy za stosowne.

Ponownie, możesz dowolnie stylizować elementy strony, podaję tylko przykład stylów, które zdecydowałem się użyć.

Po stylizacji nasz slider powinien wyglądać mniej więcej tak:


Następnie wróć do naszego plik js gdzie opisujemy, jak działają nasze przyciski. No to dodajmy jeszcze jedną funkcję, pokaże nam poprzedni slajd:

function prevSlide() (if (slideNow == 1 || slideNow<= 0 || slideNow >slideCount) (translateWidth = - $ ("# viewport"). width () * (slideCount - 1); $ ("# slidewrapper"). css (("transform": "translate (" + translateWidth + "px, 0 ) "," -webkit-transform ":" przetłumacz ("+ translateWidth +" px, 0) "," -ms-transform ":" przetłumacz ("+ translateWidth +" px, 0) ",)); slideNow = slideCount;) else (translateWidth = - $ ("# viewport"). width () * (slideNow - 2); $ ("# slidewrapper"). css (("transform": "translate (" + translateWidth + "px , 0) "," -webkit-transform ":" przetłumacz ("+ translateWidth +" px, 0) "," -ms-transform ":" przetłumacz ("+ translateWidth +" px, 0) ",)); slajdTeraz--;))

Nazywa się to poprzedni slajd, zostanie wywołane dopiero po kliknięciu poprzedni-btn... Najpierw sprawdzamy, czy jesteśmy na pierwszym slajdzie, czy nie, tutaj również sprawdzamy, czy nasz przesuńTeraz poza granice realnego zasięgu naszych zjeżdżalni i jeśli któryś z warunków zadziała, do ostatniego zjeżdżalni przejdziemy przesuwając slajd do wartości, której potrzebujemy. Obliczymy tę wartość według wzoru: (szerokość jednego slajdu) * (liczba slajdów - 1), to wszystko bierzemy ze znakiem minus, ponieważ przesuwamy go w lewo, okazuje się, że rzutnia pokaże nam teraz ostatni slajd. Na końcu tego bloku musimy również podać zmienną przesuńTerazże ostatni slajd jest teraz w naszym polu widzenia.

Jeśli nie jesteśmy na pierwszym slajdzie, musimy cofnąć się o 1, w tym celu ponownie zmieniamy właściwość przekształć w slajd... Formuła jest następująca: (szerokość jednego slajdu) * (numer bieżącego slajdu - 2), znowu bierzemy to wszystko ze znakiem minus. Ale dlaczego -2, a nie -1, czy musimy cofnąć się tylko o 1 przesunięcie? Faktem jest, że jeśli jesteśmy, powiedzmy, na drugim slajdzie, to zmienna x nieruchomości transformacja: przetłumacz (x, 0) nasz slajd jest już równa szerokości jednego slajdu, jeśli powiemy mu, że musimy od numeru bieżącego slajdu odjąć 1, to ponownie otrzymamy jednostkę, o którą jest już przesunięty slajd, więc będziesz musiał przesunąć te szerokości o 0 rzutnia, co oznacza na slideNow - 2.

Teraz wystarczy dodać te wiersze do głównego bloku kodu:

$ („# next-btn”). kliknij (funkcja () (nextSlide ();)); $ („# prev-btn”). kliknij (funkcja () (prevSlide ();));

Tutaj po prostu śledzimy, czy nastąpiło kliknięcie na naszych przyciskach, w tym przypadku wywołujemy potrzebne nam funkcje, wszystko jest proste i logiczne.

Teraz dodajmy przyciski nawigacji po slajdach, wracając do znaczników:

• 
• 
• 
• 

Jak widać, w środku rzutnia pojawiła się zagnieżdżona lista, nadaj jej identyfikator nav-btns, w środku tego Li- nasze przyciski nawigacyjne, przypiszemy im klasę slide-nav-btn, możemy jednak zakończyć ze znacznikami, przejdźmy do stylów:

# nav-btns (pozycja: bezwzględna; szerokość: 100%; dół: 20px; dopełnienie: 0; margines: 0; text-align: center;) .slide-nav-btn (pozycja: względna; display: inline-block; styl listy: brak; szerokość: 20 pikseli; wysokość: 20 pikseli; kolor tła: #fff; promień obramowania: 50%; margines: 3 piks;) .slide-nav-btn: hover (kursor: wskaźnik;)

Blok nav-btns, w którym znajdują się nasze przyciski, podajemy właściwość pozycja: bezwzględna, żeby się nie rozciągał rzutnia wzrost, ponieważ w slajd własność pozycja: względna, ustawiamy szerokość na 100%, aby używając wyrównanie tekstu: środekśrodkowe przyciski poziomo względem siebie rzutnia, a następnie za pomocą właściwości na dole wyjaśniamy naszemu blokowi, że powinien znajdować się w odległości 20px od dolnej krawędzi.

Z przyciskami robimy to samo, co z slajdami, ale teraz je ustawiamy wyświetlacz: inline-block odkąd w wyświetlacz: wbudowany nie reagują na szerokość oraz wzrost odkąd znajdują się w bezwzględnie pozycjonowanym bloku. Zrobimy je białe i z pomocą już nam znanych promień-granicy nadajmy im kształt koła. Po najechaniu na nie zmienimy wygląd naszego kursora na zwykły wyświetlacz.

Teraz przejdźmy do jQuery - części:
Najpierw zadeklarujmy zmienną navBtnId, która będzie przechowywać indeks klikniętego przycisku:

var navBtnId = 0;
$ (". slide-nav-btn"). kliknij (function () (navBtnId = $ (this) .index (); if (navBtnId + 1! = slideNow)) (translateWidth = - $ ("# viewport"). width () * (navBtnId); $ ("# slidewrapper"). css (("transform": "translate (" + translateWidth + "px, 0)", "-webkit-transform": "translate (" + translateWidth + "px, 0)", "-ms-transform": "translate (" + translateWidth + "px, 0)",)); slideNow = navBtnId + 1;)));

Oto jesteśmy po kliknięciu naszego slide-nav-btn wywołujemy funkcję, która przede wszystkim przypisuje zmiennej navBtnId indeks klikniętego przycisku, czyli jego liczba porządkowa, ponieważ liczenie zaczyna się od zera, to jeśli klikniemy drugi przycisk, to w navBtnId wartość jest zapisywana 1. Następnie sprawdzamy, gdzie do liczby porządkowej przycisku dodajemy jeden, aby uzyskać taką liczbę, jakby odliczanie nie było od 0, ale od 1, porównujemy tę liczbę z numer aktualnego slajdu, jeśli się pokrywają, nie podejmiemy żadnych działań, ponieważ żądany slajd jest już w rzutnia.

Jeśli potrzebny nam slajd jest poza zasięgiem wzroku rzutnia, następnie obliczamy odległość, o jaką musimy się przesunąć slajd po lewej stronie, a następnie zmień wartość właściwości transformacji css na translate(ta sama odległość w pikselach, 0). Robiliśmy to już nie raz, więc nie powinno być pytań. Na koniec ponownie zapisujemy wartość bieżącego slajdu do zmiennej. przesuńTeraz, wartość tę można obliczyć, dodając jeden do indeksu klikniętego przycisku.

To wszystko, w zasadzie jeśli coś nie jest jasne, to zostawiam link do jsfiddle, gdzie będzie podany cały kod napisany w materiale.

Dziękuję za uwagę!

Tagi: Dodaj tagi