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
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:
/ ** * 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
// Zainicjuj Slidr z ustawieniami niestandardowymi var s = slidr.create ("slidr-api-demo", (bułka tarta: true, overflow: true)); // Dodaj slajdy poziome ze standardowym efektem przejścia. // zduplikowany element tablicy "jeden" na końcu pozwala Slidrowi // przewijać slajdy bez końca s.add ("h", ["jeden", "dwa", "trzy", "jeden"]); // Dodaje pionowy slajd z efektem przejścia kostki. s.add ("v", ["pięć", "cztery", "trzy", "pięć"], "sześcian"); // Uruchom suwak. s.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
dobry
przepiękny
nie do wiary
Wymiary statyczne
dobry
przepiękny
nie do wiary
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.
Od autora: Mimo plotek o rzekomej „śmierci” części stron widocznych bez przewijania, potrzeba dobrego slidera nigdzie nie zniknęła. Bądźmy szczerzy, tylko przez chwilę – suwaki są fajne. Ponadto nic innego, jak przenoszenie treści, nie wywołuje efektu wow dla użytkownika. Wszystkie slidery to zestaw kilku slajdów, które wzajemnie się zastępują i niezwykle ważne jest, aby kod slidera był jak najlżejszy. Tutaj przydaje się jQuery.
Spójrz na 20 sliderów jQuery z Envato Market, a zobaczysz, że istnieją slidery, które są czymś więcej niż tylko blokiem płynnie zmieniających się obrazów.
1. RoyalSlider - galeria obrazów z ekranem dotykowym na jQuery
Responsywny suwak, który jest również przyjazny w dotyku, oznacza teraz o wiele więcej niż kiedyś. RoyalSlider łączy w sobie zarówno responsywność, jak i funkcjonalność ekranu dotykowego. Dobry wybór, ponieważ galeria jest napisana w HTML5 i CSS3.
Kilka interesujących funkcji:
JavaScript. Szybki start
Optymalizacja SEO
Wysoka personalizacja
Ponad 10 szablonów startowych
Istnieje rezerwa dla przejść CSS3
Moim zdaniem najfajniejszą cechą jest „modułowa architektura skryptów”, która pozwala wykluczyć niepotrzebne rzeczy z głównego pliku JS, tym samym zmniejszając wagę. RoyalSlider, galeria z ekranem dotykowym jQuery, to solidny suwak JavaScript, który powinien być niezbędny dla każdego zestawu narzędzi programisty.
2. Wtyczka jQuery responsywna Slider Revolution
Nie jest łatwo zrobić coś „rewolucyjnego” za pomocą suwaka. Jest tak wiele funkcji, które możesz dodać, jeśli chodzi o suwaki. Jednak Slider Revolution to naprawdę dobra próba. Spośród suwaków jQuery ta instancja spełnia wszystkie możliwe wymagania.
Lista funkcji slidera jest tak długa, że wymienię tylko te najlepsze:
Efekt paralaksy i niestandardowa animacja
Nieograniczone warstwy i slajdy z linkami
gotowe do użycia, głęboko konfigurowalne style
i wiele więcej
Możliwość dodania obrazu, wbudowanego odtwarzacza wideo i łączy do mediów społecznościowych sprawia, że Slider Revolution jest jedną z najbardziej elastycznych i konfigurowalnych opcji w Internecie.
3. Wtyczka jQuery reagująca na LayerSlider
Nazwa „LayerSlider responsywny suwak wtyczki jQuery” nie może docenić tego suwaka. Ponad 200 przejść slajdów 2D i 3D przyprawia o zawrót głowy.
Kilka godnych uwagi funkcji:
13 skórek i 3 rodzaje menu
Możliwość umieszczenia stałego obrazu na suwaku
I awaryjny jQuery
I wiele więcej
Podobnie jak w przypadku poprzedniego suwaka, możesz dodać prawie każdą zawartość, nawet zawartość multimedialną w HTML5. LayerSlider ożywia suwaki i jest bardzo ładny.
4.jQuery Banner Rotator / pokaz slajdów
jQuery Banner Rotator / Slideshow to dość prosty suwak, który nie poświęca podstawowej funkcjonalności.
Możliwości:
Podpowiedzi, wstawki tekstowe itp.
Podgląd i różne opcje przeglądania komponentów
Timer z opóźnieniem dla jednego suwaka lub dla wszystkich
Wiele przejść dla wszystkich slajdów lub różne przejścia dla każdego z osobna
jQuery Banner Rotator / Slideshow ma tylko podstawowe funkcje w porównaniu do innych sliderów jQuery, ale nie należy o tym zapominać.
5. All In One Slider - Responsywna wtyczka slidera jQuery
Każdy slider, który pojawia się w sieci, ma swoją unikalną wizję i rozwiązuje wszelkie problemy w swoim obszarze. Ale nie ten. All In One Slider można nazwać all inclusive.
Myślę, że większość programistów i projektantów stron internetowych ma sprawdzone rozwiązanie, ale zawsze szukają czegoś nowego. A to „coś nowego” obejmuje:
Rotator banerów
Baner z podglądem
Baner playlisty
Suwak treści
Karuzela
Wszystkie typy suwaków obsługują większość, jeśli nie wszystkie, funkcje potrzebne suwakom jQuery. Czy All In One Slider będzie Twoim all inclusive?
Nawigacja za pomocą klawiatury, obsługa dotykowa i pełna personalizacja
I wiele więcej
Jednak najlepszą cechą jest Advanced Slider - API jQuery XML Slider, dzięki czemu suwak jest idealny do Twojej aplikacji internetowej.
10.JQuery Suwak Zoom In / Out Effect w pełni responsywny
Jeden z tych sliderów jQuery, który sprawi, że obejrzysz demo, zanim zaczniesz czytać o jego możliwościach. Po prostu chcesz zrozumieć, co oznacza ten „efekt powiększenia / pomniejszenia”.
Efekt powiększenia jest dość słaby, ale dodaje poczucie kontroli i prawdziwego dotyku do obrazu, podczas gdy reszta suwaka jest statyczna. Cechy szczególne suwaka:
Przejścia CSS3 między warstwami
Opcja zakończenia animacji dla warstw
Opcje stałej szerokości, pełnego ekranu i pełnej szerokości
Animowany tekst z formatowaniem HTML i CSS
Większość suwaków stara się włączyć jak najwięcej efektów, a jQuery Slider Zoom In / Out Effect Fully Responsive ma tylko efekt Kena Burnsa, ale jest dobrze zaimplementowany.
11. Ewolucja karuzeli jQuery
Podobnie jak wspomniany wcześniej Advanced Slider - jQuery XML Slider, jQuery Carousel Evolution posiada własne API, które można wykorzystać do zwiększenia funkcjonalności lub zintegrowania slidera z innym projektem.
JavaScript. Szybki start
Poznaj podstawy JavaScript na praktycznym przykładzie budowania aplikacji internetowej
Dzięki obrazom, znacznikom HTML, filmom z YouTube i Vimeo otrzymujesz również:
Optymalizacja SEO
9 stylów karuzeli
Efekty cieni i odbić
Rozmiar obrazu można regulować, zarówno z przodu, jak iz tyłu
jQuery Carousel Evolution to prosta karuzela z wieloma przypadkami użycia.
12. Seksowny suwak
Sexy Slider nie jest już tak sexy jak kiedyś. Jednak ze względu na swój wiek ten suwak jest godny zaufania.
Suwak na pierwszy rzut oka nie jest imponujący, ale dobrze ustawiony, będzie idealnie pasował do Twojego projektu. Możliwości:
Autoodtwarzanie slajdów
Podpisy do zdjęć
Ciągłe odtwarzanie slajdów
6 efektów przejścia
Sexy Slider czeka, aż uwolnisz swoją pełną moc i potencjał.
13.jQuery Image & Content Scroller w / Lightbox
Dzięki tym wszystkim mobilnym projektom i obsłudze ekranu dotykowego miło jest zobaczyć suwak jQuery, który nie zapomniał wrażenia z komputera stacjonarnego.
jQuery Image & Content Scroller w / Lightbox obsługuje wprowadzanie danych z klawiatury i kółka myszy oraz inne funkcje:
Orientacja pozioma i pionowa
Napisy tekstowe wewnątrz lub na zewnątrz suwaka
Możliwość ustawienia określonej liczby slajdów widocznych jednocześnie
Obrazy w tekście, Flash, ramki iframe, Ajax i zawartość w tekście
Suwak posiada również wbudowany lightbox. W razie potrzeby w jQuery Image & Content Scroller w / Lightbox nie można uruchomić samego suwaka, ale osobno uruchomić lightbox.
Większość sliderów jQuery ma swoje własne projekty. Możesz go dostosować dla siebie, ale czasami chcesz, aby wszystko było wewnątrz suwaka. Przedstawiamy Państwu Translucent.
Suwak zawiera wiele ustawień wstępnych. Być może wystarczy skonfigurować określone ustawienia i to wszystko. Możliwości:
6 różnych stylów
4 efekty przejścia
2 przejścia machnięcia
Konfigurowalne przyciski i napisy
Podobnie jak inne, ten suwak jest wrażliwy na dotyk, responsywny i akcelerowany sprzętowo. Translucent to suwak o minimalistycznym wyglądzie, który stawia samą treść na pierwszym planie.
15. FSS — pełnoekranowa wtyczka do przesuwania strony internetowej
Czy chcesz stworzyć pełnoekranową witrynę ze slajdami? Wtedy potrzebujesz FSS.
W rzeczywistości bardzo łatwo jest stworzyć pełnoekranową witrynę z suwakiem za pomocą tego suwaka jQuery. Możliwości:
Obsługa AJAX
Pasek przewijania
Obsługa technologii głębokiego linkowania
2 różne efekty przejścia
Warto również zapoznać się z obsługą klawiatury i 11-stronicowym przewodnikiem. Jednak prawdziwe wrażenie robi waga FSS, tylko 5Kb.
Kolejny przykład skoncentrowanego na stylu suwaka jQuery, który wykonuje całkiem dobrą robotę. Akordeon Zozo to pozycja obowiązkowa dla każdego, kto szuka dobrego akordeonu suwakowego z możliwością zmiany stylu.
To piękno z animacją CSS3 ma również dość szeroki zakres funkcji:
Akordeon poziomy i pionowy
Semantyczny HTML5 i optymalizacja SEO
Obsługa dotyku, klawiatury i WAI-ARIA
Ponad 10 skórek i 6 układów
I wiele więcej
Zozo Accordion ma bezpłatne wsparcie i ciągłe aktualizacje oraz wszystkie funkcje, które chcesz zobaczyć w akordeonie jQuery.
17.jQuery Responsywna wtyczka suwaka OneByOne
Wtyczka jQuery Responsive OneByOne Slider przypomina bardziej prostą animację niż suwak. Zamiast wyświetlać jeden slajd na raz, to wystąpienie wypełnia ekran slajdami krok po kroku, dopóki nie będzie miejsca w obszarze, zanim przejdzie do następnego slajdu.
Animacje CSS3 działają z poziomu Animate.css, są lekkie, wielowarstwowe i przyjazne dla urządzeń mobilnych. Kilka funkcji:
Dostępna jest również opcja nawigacji przeciągnij i upuść. jQuery Responsive OneByOne Slider Plugin jest zasilany przez karuzelę Twitter Bootstrap.
18. Akordeonza - wtyczka jQuery
Żaden suwak jQuery nie jest prostszy. Do działania potrzebuje tylko suwaka o wielkości 3 KB, dzięki czemu Accordionza jest najlżejszym suwakiem akordeonowym w historii.
Jeśli nie podobają Ci się te trzy style, możesz samodzielnie dostosować kod HTML i CSS. Możliwości:
Nawigacja za pomocą klawiatury
Łatwe do dostosowania efekty i przyciski
Technika progresywnego ulepszania - działa bez JavaScript
Pamiętaj, że Accordionza może wyświetlać wiele odmian mieszanych treści, dzięki czemu jest niezwykle elastyczna.
19.mightySlider - Responsywny uniwersalny suwak
MightySlider to naprawdę potężny suwak. Może być używany nie tylko jako prosty suwak obrazu, ale także jako pełnoekranowy jednokierunkowy suwak z nawigacją po pozycjach menu. Może być wykorzystany do stworzenia świetnej jednostronicowej strony internetowej.
Pod maską znajdziesz wiele opcji:
Obsługa klawiatury, myszy i dotyku
Przyspieszone sprzętowo przejścia CSS3
Czyste prawidłowe znaczniki i optymalizacja SEO
Nieograniczona liczba slajdów, warstw dla podpisów i efektów dla nich
Interfejs API jest bardzo wydajny i przyjazny dla programistów, co otwiera różne sposoby korzystania z niego. MightySlider to doskonały, progresywny slider jQuery z czystym i dobrze skomentowanym kodem.
20. Parallax Slider - Responsywna wtyczka jQuery
Parallax Slider działa jak wtyczka jQuery Responsive OneByOne Slider i pozwala animować każdą warstwę osobno w ramach jednego slajdu. Możesz animować wszystkie slajdy, a nawet tylko jeden, dodając animację paralaksy.
W zestawie 4 suwaki różnego typu, wszystkie z efektem paralaksy. Podobnie jak inne slidery jQuery, posiada:
W pełni konfigurowalny
Wsparcie dotykowe
W pełni responsywny, nieograniczona liczba warstw
Autoodtwarzanie, pętla, regulacja wysokości i szerokości oraz timer
Warstwy animowane to nie tylko tekst i obrazy. Możesz także dodawać filmy z YouTube, Vimeo i HTML5. Parallax Slider to kolejny dobry przykład tego, jak symulować efekty Flash jeszcze lepiej niż sam Flash, który jest również obsługiwany na wszystkich urządzeniach.
Wniosek
Ciekawie jest zobaczyć, jak suwaki jQuery wyrosły z czegoś, co po prostu zamienia jeden obraz na drugi, w ogromny zestaw kreatywnych narzędzi. Teraz dostępne są slidery 3D, paralaksy, full page, adaptacyjne oraz takie, które można oglądać zarówno na komputerach stacjonarnych, jak i smartfonach.
Jeśli nie podoba Ci się żaden ze slajdów z tej listy, zawsze możesz skorzystać z samouczka kodu jQuery na Envato i opracować coś zupełnie nowego i unikalnego.
Lub sprawdź inne suwaki na Envato Market, aby uzyskać różne opcje. Jaki jest twój ulubiony suwak jQuery i dlaczego?
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:
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ć slider 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. Choć rozwiążę z tym problem, to nie będę miał rozeznania w działaniu tego mechanizmu, a korzystanie z wtyczki ze względu na jeden slider nie jest zbyt optymalne. Ja też nie bardzo chciałem rozumieć krzywe skrypty, więc postanowiłem napisać własny skrypt dla slidera, który sam będę zaznaczał w miarę potrzeb.
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 dodaj 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ó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ć:
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 znaczy, ż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:
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ś:
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 numeru seryjnego przycisku dodajemy jeden, aby uzyskać taką liczbę, jakby odliczanie nie było od 0, ale od 1, porównujemy tę liczbę z liczbą aktualny slajd, 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
Dodaj tagi
To responsywny suwak dotykowy napisany w jQuery. Silnik tej wtyczki wykorzystuje animacje CSS3, ale jednocześnie istnieją rozwiązania zastępcze dla starszych wersji przeglądarek. Glide.js jest prosty i lekki.
Stosowanie
1. W tym jQuery
Jedyną zależnością wtyczki jest jQuery, które musimy uwzględnić w pierwszej kolejności:
2. Połącz Glide.js
3. Dodaj html
Uwzględnijmy podstawowe style.
Zwińmy strukturę suwaka html.
4. Inicjalizacja
Uruchom suwak z domyślnymi ustawieniami...
... lub dostosuj go dla siebie
Ustawienia
Lista dostępnych parametrów:
Parametr
Domyślna wartość
Typ
Opis
Automatyczne odtwarzanie
4000
int / bool
Automatyczne przewijanie (fałsz, aby wyłączyć)
hoverpauza
prawda
głupota
Wstrzymaj automatyczne przewijanie po najechaniu na suwak
animacjaCzas
500
int
!!! Ta opcja działa, jeśli przeglądarka NIE obsługuje CSS3. Jeśli css3 jest obsługiwane przez przeglądarkę, to ten parametr należy zmienić w pliku .css !!!
strzałki
prawda
bool / ciąg
Pokaż / ukryj / dołącz strzałki. Prawda, aby wyświetlić strzałki w kontenerze suwaka. Fałsz do ukrycia. Możesz również podać nazwę klasy (na przykład: ".class-name"), aby dołączyć specjalny kod HTML
arrowsWrapperClass
suwak-strzałki
strunowy
Klasa do przypisania do kontenera za pomocą strzałek
arrowGłównaKlasa
suwak-strzałka
strunowy
Główna klasa dla wszystkich strzał
arrowPrawaKlasa
suwak-strzałka - w prawo
strunowy
Klasa strzałki w prawo
arrowLeftKlasa
suwak-strzałka - w lewo
strunowy
Klasa strzałki w lewo
arrowRightText
Następny
strunowy
Tekst strzałki w prawo
arrowLeftText
poprzedni
strunowy
Tekst strzałki w lewo
nawigacja
prawda
bool / ciąg
Pokaż / ukryj / dołącz nawigację slajdów. Prawda do wyświetlenia. Fałsz do ukrycia
navCenter
prawda
głupota
Centralna nawigacja
navClass
suwak-nav
strunowy
Klasa kontenera nawigacyjnego
navItemClass
suwak-nav__item
strunowy
Klasa dla elementu nawigacyjnego
navCurrentItemClass
slider-nav__item - bieżący
strunowy
Klasa dla bieżącego elementu nawigacji
klawiatura
prawda
głupota
Przewiń slajd, naciskając lewy / prawy przycisk
dotknijOdległość
60
int / bool
Wsparcie dotykowe. Fałsz, aby wyłączyć tę funkcję.
przed rozpoczęciem
funkcja () ()
funkcjonować
Callback, który zostanie uruchomiony przed zainicjowaniem wtyczki
afterInit
funkcja () ()
funkcjonować
Callback, który zostanie uruchomiony po zainicjowaniu wtyczki
przed przejściem
funkcja () ()
funkcjonować
Callback, który zostanie uruchomiony przed przewinięciem suwaka
po przejściu
funkcja () ()
funkcjonować
Callback, który zostanie uruchomiony po przesunięciu suwaka
API
Aby użyć API, napisz slide do zmiennej.
Var glide = $ (". Suwak"). Glide (). Dane ("api_glide");
Teraz dostępne są dla Ciebie metody API.
Glide.jump (3, console.log ("Wooo!"));
.current() — Zwraca aktualny numer boczny
.play () - Rozpocznij automatyczne przewijanie
.pause () - Zatrzymaj automatyczne przewijanie
.next (callback) - Przewiń suwak do przodu
.prev (callback) - Przesuń suwak z powrotem
.jump (odległość, oddzwonienie) - Przełącz na konkretny slajd
.nav (target) - Dołącz nawigację do określonego elementu (na przykład: "body", ".class", "#id")
.arrows (target) - Dołącz strzałki do określonego elementu (na przykład: "body", ".class", "#id")
Pobieranie rozpocznie się teraz ... Nie zapomnij udostępnić materiału w sieciach społecznościowych z Twoim koledzy
wejście
