W tym samouczku stworzymy świetny suwak CSS3. Wykorzysta efekt zanikania między slajdami. Dodatkowo możesz użyć opisu dla każdego obrazu. Do uporządkowania informacji zostanie użyta nieuporządkowana lista. Slajdy zostaną automatycznie przełączone przy użyciu animacji CSS3.

Znaczniki HTML

Znaczniki HTML są bardzo proste. Przykład ma cztery slajdy. Każdy z nich składa się z obrazu (jako tła) i tekstu opisu w elemencie div. Wkładanie dodatkowych szkiełek jest bardzo łatwe.

css

Suwak używa animacji CSS3 anim_slides i anim_titles . Pierwszy dotyczy poszczególnych slajdów, drugi - tekstu opisu. Zmienia się również pozycja i przejrzystość opisu.

/* Suwak */ .slides ( height:300px; margin:50px auto; overflow:hidden; position:relative; width:900px; ) .slides ul ( list-style:none; position:relative; ) /* Klatki animacji # anim_slides */ @-webkit-keyframes anim_slides ( 0% ( krycie:0; ) 6% ( krycie:1; ) 24% ( krycie:1; ) 30% ( krycie:0; ) 100% ( krycie:0; ) ) @-moz-keyframes anim_slides (0% ( krycie:0; ) 6% ( krycie:1; ) 24% ( krycie:1; ) 30% ( krycie:0; ) 100% ( krycie:0; ) ) . slides ul li (opacity:0; position:absolute; top:0; /*css3 animation */ -webkit-animation-name: anim_slides; -webkit-animation-duration: 24.0s; -webkit-animation-timing-function: liniowy; -liczba-iteracji-animacji-webkit: nieskończona; -kierunek-animacji-webkit: normalna; -opóźnienie-animacji-webkit: 0; -stan-odtwarzania-animacji-webkit: działa; -tryb wypełniania-animacji-webkit : forwards; -moz-nazwa-animacji: anim_slides; -moz-animation-duration: 24.0s; -moz-animation-timing-function: linear; -moz-animation-ite stosunek licznika: nieskończony; -moz-kierunek animacji: normalny; -moz-animacja-opóźnienie: 0; -moz-animation-play-state: bieganie; -moz-animation-fill-mode: do przodu; ) /* opóźnienia css3 */ .slides ul li:nth-child(2), .slides ul li:nth-child(2) div ( -webkit-animation-delay: 6.0s; -moz-animation-delay: 6.0 s; ) .slides ul li:nth-child(3), .slides ul li:nth-child(3) div ( -webkit-animation-delay: 12.0s; -moz-animation-delay: 12.0s; ) . slides ul li:nth-child(4), .slides ul li:nth-child(4) div ( -webkit-animation-delay: 18.0s; -moz-animation-delay: 18.0s; ) .slides ul li img ( display:block; ) /* #anim_titles klatki animacji */ @-webkit-keyframes anim_titles ( 0% ( left:100%; opacity:0; ) 5% ( left:10%; opacity:1; ) 20% ( left:10%; krycie:1; ) 25% ( left:100%; krycie:0; ) 100% ( left:100%; krycie:0; ) ) @-moz-keyframes anim_titles ( 0% ( left:100 %; krycie:0; ) 5% ( lewy:10%; krycie:1; ) 20% ( lewy:10%; krycie:1; ) 25% ( lewy:100%; krycie:0; ) 100% ( lewy :100%; krycie:0; ) ). FFF; rozmiar czcionki:26px; lewa:10%; margines:0 auto; dopełnienie:20px; pozycja:bezwzględna; góra:50%; szerokość:200px; /* CSS3 animacji */ -webkit-nazwa-animacji: anim_titles; -webkit-animacja-czas trwania: 24.0s; -webkit-animacja-funkcja czasowa:liniowa; -webkit-animacja-liczba-iteracji: nieskończona; -webkit-animacja-kierunek: normalny; -webkit-animacja-opóźnienie: 0; -webkit-animacja-stan odtwarzania: działa; -webkit-animacja-tryb wypełniania: do przodu; -moz-nazwa-animacji: anim_titles; -moz-animacja-czas trwania: 24. 0s; -moz-animacja-funkcja czasowa: liniowa; -moz-animacja-liczba-iteracji: nieskończona; -moz-kierunek animacji: normalny; -moz-animacja-opóźnienie: 0; -moz-animation-play-state: bieganie; -moz-animation-fill-mode: do przodu; )

4 listopada 2019 r. Wpis został zaktualizowany

Jurij Nemets

Suwaki włączone czysty CSS+ suwak bonusu

Suwaki CSS mają pewną przewagę nad suwakami JavaScript. Jedną z takich korzyści jest szybkość pobierania. Nie tylko obrazy do sliderów są używane w dużych rozmiarach (jeśli nie ma optymalizacji dla różnych ekranów), ale także ładowanie skryptów zajmuje trochę czasu. Ale w artykule zobaczysz tylko czyste suwaki CSS.

Oto, co znalazłem na stronie o suwakach:

1. Suwak obrazu CSS3

Suwak CSS, który używa przycisków radiowych do poruszania się po slajdach. Te przyciski radiowe znajdują się pod suwakami. Oprócz przycisków radiowych nawigacja odbywa się za pomocą strzałek po lewej i prawej stronie. Aby śledzić, który obraz teraz wyświetlić, używane są pseudoklasy :checked.

2. Suwak obrazu CSS3 z miniaturami

W przeciwieństwie do poprzedniego suwaka CSS, tutaj zamiast przycisków opcji znajdują się miniatury wszystkich obrazów na dole, co jest również wygodne podczas tworzenia galerii obrazów. Obrazy zmieniają się z dziwnym efektem: znikają płynnie po powiększeniu.

3. Galeria CSS

Ale ten suwak CSS jest idealny do sprzedaży stron. Z reguły podczas tworzenia stron docelowych (sprzedających strony) wielu twórców stron internetowych umieszcza suwak na samym początku, aby na pierwszym ekranie (bez przewijania) odwiedzający mógł od razu zobaczyć wszystkie korzyści, jakie ta strona ma dla niego. Przede wszystkim ten suwak jest responsywny, co również jest miłe.

4. Suwak CSS bez linków

Chcę tylko zauważyć, że ten suwak nie używa linków! Domyślnie oprócz głównego obrazu (slajdu) widoczne są jeszcze 2 slajdy. Znajdują się za głównym. Zmiana slajdów odbywa się w pięknym trybie: najpierw rozsuwają się dwa slajdy, a slajd staje się środkiem, który następnie staje się głównym. Slajd jest następnie powiększany i umieszczany przed innymi.

5. Responsywny suwak CSS3

Kolejny adaptacyjny suwak oparty na przyciskach radiowych. Aby zobaczyć, jak będzie wyglądał ten suwak różne urządzenia ah - Możesz samodzielnie zmienić okno przeglądarki lub na stronie z suwakiem znajdują się specjalne ikony dla różnych urządzeń, po kliknięciu których zobaczysz wygląd suwaka na komputerze, tablecie lub smartfonie.

*** SUWAK BONUSOWY ***

Oprócz wszystkich suwaków przedstawionych powyżej, chcę cię zadowolić jeszcze jednym. Ten suwak świetnie nadaje się do tworzenia galerii obrazów. Słowa nie potrafią wyjaśnić, co robi, więc lepiej obejrzeć wszystko na wideo:

Wniosek

Za pomocą suwaków możesz pięknie zaprojektować galerie zdjęć, umieszczając je w bardziej zwarty sposób, wstawić suwak na pierwszy ekran (część strony widoczna bez przewijania) strony sprzedażowej, aby od razu pokazać odwiedzającemu główne korzyści, które otrzyma. Nadal możesz znaleźć wiele sposobów, gdzie i jak możesz zastosować suwaki, ale jedno jest pewne - przydają się, gdy są używane prawidłowo.

Pozycje omówione w artykule.

Czas nie stoi w miejscu, a wraz z nim postęp. Wpłynęło to również na Internet. Już widać zmianę wygląd zewnętrzny strony, szczególnie popularne projekt adaptacyjny. W rezultacie wiele nowych responsywne jquery suwaki, galerie, karuzele lub podobne wtyczki.
1. Responsywny suwak poziomych słupków

Responsywna pozioma karuzela z szczegółowa instrukcja przez instalację. Jest wykonany w prostym stylu, ale możesz go zaprojektować dla siebie.

2. Suwak na Glide.js

Ten suwak jest odpowiedni dla każdej strony internetowej. Używa Glide.js z otwarte źródło. 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 losowego wyglądu.

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

Bardzo piękny i imponujący suwak z interaktywnymi cząsteczkami. Wykonane z płótna HTML5

5. Suwak morfingu obrazu

Suwak z efektem morfingu (Płynna transformacja z jednego obiektu do drugiego). W ten przykład suwak jest dobrze dopasowany do portfolio programisty internetowego lub studia internetowego w formie portfolio.

6. Okrągły suwak

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

7. Suwak rozmytego tła

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

8. adaptacyjna moda suwak

Prosty, lekki i responsywny suwak strony internetowej.

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

Zaktualizowana wersja suwaka Slicebox z poprawkami i nowymi funkcjami.

10. Bezpłatna animowana siatka obrazu responsywnego

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. Może to dobrze wyglądać jako tło lub element dekoracyjny na stronie, ponieważ możemy ustawić selektywny wygląd nowych obrazów i ich przejść. Wtyczka jest wykonana w kilku wersjach.

11. Suwak Flex

Uniwersalna darmowa wtyczka do Twojej witryny. Ta wtyczka jest dostępna w wielu opcjach suwaków i karuzeli.

12. Ramka na zdjęcia

Fotorama to uniwersalna wtyczka. Posiada wiele ustawień, wszystko działa szybko i łatwo, można oglądać slajdy na pełnym ekranie. Suwak może być używany zarówno w stałym rozmiarze, jak i adaptacyjnym, z miniaturami i bez nich, z przewijaniem po okręgu i bez niego 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 miniatur 3D.

Eksperymentalna galeria suwaków Układ panelu 3D z siatką i ciekawymi efektami animacji.

14. Suwak na CSS3

Responsywny slider wykonany w css3 z płynnym wyglądem treści i lekką animacją.

15. Suwak WOW

Suwak WOW to suwak obrazu z niesamowitymi efektami wizualnymi.

17.Elastyczny

Elastyczny suwak z pełną responsywnością i miniaturami slajdów.

18. Szczelina

Jest to responsywny suwak pełnoekranowy wykorzystujący animację CSS3. Suwak wykonany jest w dwóch wersjach. Animacja jest wykonana dość nietypowo i pięknie.

19. Responsywna galeria zdjęć plus

Prosta bezpłatna galeria suwaków z przesyłaniem obrazów.

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 oprawą muzyczną

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

23. Suwak z jmpress.js

Suwak responsywny jest oparty na jmpress.js i dlatego pozwala na zastosowanie ciekawych efektów 3D na slajdach.

24. Szybki pokaz slajdów

pokaz slajdów z szybkie przełączanie slajdy. Slajdy włączają się.

25. Akordeon obrazu z CSS3

Obraz akordeon z CSS3.

26. Zoptymalizowana dotykowo wtyczka galerii

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

27. Galeria 3D

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

28. Suwak z paginacją

Responsywny suwak stronicowania z suwakiem jQuery UI. chodzi o zastosowanie prostej koncepcji nawigacji. Możliwe jest przewijanie wszystkich obrazów lub przełączanie między slajdami.

29. Montaż obrazu za pomocą jQuery

Automatyczne rozmieszczenie obrazów w zależności od szerokości ekranu. Bardzo przydatna rzecz przy tworzeniu strony z portfolio.

30. Galeria 3D

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

31. Pełny ekran z efektem 3D na CSS3 i jQuery

Suwak z możliwością wyświetlania pełnoekranowych obrazów z pięknym przejściem.

1. Wtyczka jQuery Fresco

Responsywna galeria jquery (zmienia rozmiar, gdy zmienia się rozdzielczość ekranu) wyświetlana w wyskakującym okienku z miniaturami i podpisami do obrazów. Galeria jquery fresco działa poprawnie w większości przeglądarek, w tym: IE6+, Firefox 3+, Chrome 5+, Opera 9+. Bezpłatna wersja tej wtyczki może być używana tylko w projektach niekomercyjnych.

2. Suwak „Adapter”

Suwak z różnymi efektami przejścia (7 różnych efektów, w tym 3D). Projekt na Github.

3. Wtyczka Slider z różnymi efektami "jQ-Tiles"

Wtyczka z różnymi efektami przejścia, z regulowaną prędkością przesuwania, z funkcją automatycznego przewijania.

4. Wtyczka jQuery "Sly"

Wtyczka do implementacji scrollera pionowego i poziomego. Projekt na Github.

5. Animowane menu Makisu CSS3

6. Prosty pokaz slajdów

7. Funkcjonalny suwak jQuery „iView Slider v2.0”

Suwak treści / pokaz slajdów (slajdem mogą być nie tylko obrazy, ale także klipy wideo i nie tylko) zawartość HTML). Do nawigacji można wykorzystać: miniatury, przyciski Lewo/Prawo oraz korzystanie z klawiatury. Projekt na Github.com.

8. Zestaw wtyczek jQuery "Vanity"

W zestawie znajduje się 7 wtyczek: jSlider, jTabs, jPaginate, jSpotlight, jTip, jPlaceholder oraz jCollapse. Zestaw tych rozwiązań pomoże Ci zaimplementować suwaki, podpowiedzi, karty, wyskakujące okienka obrazów i nie tylko.

9. Najedź na efekt CSS3

10. Menu rozwijane CSS3

11.iOSlider

Slider przeznaczony do pracy na urządzeniach mobilnych.

12. Wskaźnik ładowania CSS3

13. Efekt najechania CSS3

14. Wtyczka jQuery „Produkt Colorizer”

Wtyczka to lekkie rozwiązanie do przeglądania produktów w różnych kolorach (istotne np. dla internetowych sklepów odzieżowych, aby umożliwić odwiedzającym wybór schemat kolorów produkt z kilku opcji). Wtyczka wymaga tylko dwóch obrazów dla każdego produktu (wszystkie kolory zostaną nałożone jako maska). Wtyczka działa we wszystkich głównych przeglądarkach, w tym IE7+ (będzie działać również w IE6, jeśli naprawisz wyświetlacz) przezroczystość PNG). Projekt na GitHub.

15. Animowane wykresy CSS3

16. Tworzenie efektu nakładki po kliknięciu obrazu

Po kliknięciu obrazu ciemnieje on, przechodząc do tła i pojawiają się akapity z podpisami. W ten sposób można dawać krótki opis elementy obrazu.

17. Nawigacja strony w formie rozwijanego menu

Rozwiązanie umożliwiające zaimplementowanie wygodnej nawigacji po dokumentach w postaci rozwijanego menu. Treść jest zamocowana u góry ekranu i zawsze pozostaje w polu widzenia odwiedzającego. Po wybraniu sekcji w menu, płynne przewijanie stronę do wybranej części dokumentu.

18. Galeria CSS3 z efektem najechania

Po najechaniu na obraz następuje szybka zmiana zdjęć. Galeria realizowana jest w dwóch wersjach: z opisem zdjęć pojawiających się po odsunięciu przez odwiedzającego kursora od galerii oraz bez opisu.

19. jQuery Parallax Slider

20. Animacja najechania CSS3 na blokach

21. Panel wyskakujący CSS3 jQuery

Kliknij strzałkę u dołu ekranu na stronie demonstracyjnej, aby wyświetlić wyskakujące ikony.

22. Darmowa galeria obrazów HTML5 „Juicebox Lite”

Bardzo funkcjonalna nowa galeria zdjęć na stronie. Galeria może być z miniaturami lub bez, z opisem obrazu lub bez, można ją rozszerzyć do pełnego ekranu lub wyświetlić na stronie o stałych rozmiarach. Na stronie demo możesz wybrać rodzaj galerii, którą lubisz. Dostępny do pobrania Darmowa wersja galerie. Za bardziej zaawansowaną funkcjonalność i usunięcie logo dewelopera będziesz musiał zapłacić.

23. Wtyczka "JQVMap"

24. Suwak paralaksy CSS3

25. Galeria zdjęć jQuery z miniaturami

Rozmiary responsywnej galerii, obrazów i miniatur zmieniają się wraz z rozmiarem okna przeglądarki.

26. Wtyczka suwaka treści jQuery „Horinaja”

Wtyczka jest łatwa w instalacji, konfigurowalna, w wielu przeglądarkach. Jako slajd może działać dowolna zawartość HTML, a nie tylko obrazy. Możesz przewijać slajdy za pomocą kółka myszy, gdy kursor znajduje się w obszarze slajdu.

27. Wtyczka suwaka jQuery Pikachoose

W trzech wariantach: wykonanie prostej zmiany zdjęć bez opisu i miniatur; suwak z podpisami do zdjęć i miniaturami; suwak z miniaturami i dodano otwieranie większego obrazu w wyskakującym okienku z efektem FancyBox. Najnowszą wersję zawsze można znaleźć na Github.

28. Niektóre niestandardowe style CSS dla rozwijanych menu

Pięć różnych stylów list rozwijanych przy użyciu inny CSS technik.

29. Menu restauracji z animowanym efektem 3D

Ciekawa prezentacja CSS jQuery informacji na stronie. Klikając na link, otwiera się menu broszury, a odwiedzający może przeczytać więcej o daniach podanych w wyskakującym okienku. Animacja nie wyświetla się poprawnie w IE.

30. Wtyczka Elastislide

Wdrożenie gumowej responsywnej karuzeli (pionowa i pozioma karuzela obrazów) oraz galerii obrazów. Gdy okno przeglądarki jest zmniejszone, liczba obrazów zmniejsza się do pewnego minimalna wartość a następnie skalowany jest rozmiar pozostałych obrazów. Projekt na Github.

31. Świeży suwak CSS3 jQuery Slit Slider

Responsywna wtyczka slidera (szerokość można ustawić w procentach i będzie się automatycznie skalować) w dwóch stylach z ciekawym efektem animacji przy zmianie slajdów (slajd jest przecięty na pół i rozsuwany w różne strony i nowy zajmuje jego miejsce). Możliwa jest nawigacja za pomocą klawiatury. Ostatnia wersja zawsze na Github.

32. Nowa wersja suwaka obrazu 3D „Slicebox”

Nowa wersja dzięki wprowadzonym zmianom i dodaniu nowych funkcji: teraz suwak 3D stał się skalowalny, możesz to zobaczyć po zmniejszeniu okna przeglądarki; Dodano wsparcie dla Firefoksa; w opisie slajdu można już używać treści HTML (wcześniej opis był wyciągany z atrybutu link bez możliwości użycia Tagi HTML). Na stronie demonstracyjnej możesz zobaczyć 4 opcje korzystania z wtyczki. Ostatnia wersja mieszka na Github.com.

Efekt jest bardzo podobny do 3D CU3ER Flash Gallery (demo , download), tylko ten suwak 3D nie jest wykonany z Lampa błyskowa technologii, ale z pomocą javascript.

Wtyczka 33.jQuery "PFold"

Rozwiązanie eksperymentalne. Wtyczka implementuje efekt 3D z imitacją rozwijania notatki. Różne wersje: z trzema rozkładówkami, z dwiema rozkładówkami i rozkładówką z późniejszym wyśrodkowaniem rozszerzonej nuty.

34.jQuery Wtyczka "Wietrzny"

Wtyczka do poruszania się po treściach, takich jak obrazy. Podczas przewijania zdjęć rozpraszają się one w różnych kierunkach (efekt przypomina nieco rozłożenie kart w pokerowej grze karcianej). Do nawigacji możesz użyć przycisków lewo/prawo lub suwaka (zobacz różne opcje na stronie demo). Projekt włączony

Praca nad książką o jQuery, natknąłem się na fakt, że wielu moich subskrybentów prosiło mnie o opowiedzenie w nim jak napisać skrypt slidera w jquery. Przepraszam, drodzy przyjaciele! Na podwórku XXI wieku i na szczęście mamy dostęp do wszystkich uroków CSS3, co pozwala nam realizować takie rzeczy bez jednej linijki javascript.

Część 1.

Na początek wyjaśnię tym, którzy nie wiedzą, czym jest suwak. Suwak- jest to blok o określonej szerokości zajmujący część strony internetowej lub jej całość. Jego główną cechą jest zmiana w automatycznym lub tryb ręczny zawartość. Treść może być obrazy graficzne i trochę tekstu.

Oczywiście możesz zapytać: po co wymyślać koło na nowo, skoro w javascript jest wiele implementacji suwaków? Oto moje argumenty:

1. Efekty CSS działają szybciej. Widać to wyraźnie na urządzeniach mobilnych.
2. Do stworzenia suwaka nie są wymagane żadne umiejętności programistyczne.

Tak więc w naszym przykładzie potrzebujesz czterech obrazów, chociaż w swoim projekcie możesz zrobić pasek z tyloma obrazami, ile potrzebujesz. Jedynym warunkiem jest to, że wszystkie obrazy muszą mieć ten sam rozmiar. Zapomniałem też powiedzieć, że nasz suwak będzie adaptacyjny (tak, tak, Układ adaptacyjny , dobrze to przeczytałeś) i możesz go używać w dowolnym projekcie na dowolnym urządzeniu. Ale dość gadania, już mnie swędzą ręce, żeby napisać mega-kod. Zacznijmy od HTML:

Zostawiłem atrybut alt pusty, aby zaoszczędzić miejsce, ale możesz go wypełnić samodzielnie na podstawie swoich żądań SEO i poinformować użytkowników, którzy wyłączyli obrazy w przeglądarce. Chcę również zwrócić uwagę na fakt, że pierwszy obraz ( aladin.jpg) będzie również obecny na końcu paska, co pozwoli naszemu sliderowi na cykliczne przewijanie bez szarpania.

Dla wygody szerokość wynosi 80% okna, a maksymalna szerokość to rozmiar każdego pojedynczego zdjęcia (w naszym przykładzie 1000 pikseli), ponieważ nie chcemy, aby obraz był rozciągnięty:

Suwak ( szerokość: 80%; maksymalna szerokość: 1000px; )

W naszym kodzie CSS szerokość figury jest wyrażona jako procent elementu div, w którym się ona znajduje. Oznacza to, że jeśli pasek obrazu zawiera pięć zdjęć, a element div renderuje tylko jedno, szerokość figury zwiększa się pięciokrotnie, co stanowi 500% szerokości elementu div kontenera:

Ustawienie rozmiaru czcionki: 0 wydmuchuje całe powietrze z figury, usuwając białą przestrzeń wokół i między obrazami. pozycja: względna ułatwia przesuwanie postaci podczas animacji.

Musimy podzielić zdjęcia równo w pasku obrazu. Wzór jest bardzo prosty: jeśli założymy, że figura jest szeroka na 100%, każdy obrazek powinien zajmować 1/5 przestrzeni poziomej:

Istnieje potrzeba zastosowania następującej reguły CSS:

Imagetrip img ( szerokość: 20%; wysokość: auto; )

Teraz zmieńmy się przepełnienie nieruchomości dla div:

Suwak (szerokość: 80%; maksymalna szerokość: 1000px; przepełnienie: ukryte)

Na koniec musimy przesunąć pasek obrazu od lewej do prawej. Jeśli szerokość elementu div kontenera wynosi 100%, każdy ruch paska obrazu w lewo będzie mierzony jako procent tej odległości:

@keyframes slides ( 20% ( lewy: 0%; ) 25% ( lewy: -100%; ) 45% ( lewy: -100%; ) 50% ( lewy: -200%; ) 70% ( lewy: -200 %; ) 75% ( lewy: -300%; ) 95% ( lewy: -300%; ) 100% ( lewy: -400%; ) )

Każdy obraz na suwaku zostanie zawinięty w div i przesunie się o 5%.

Figura suwaka ( pozycja: względna; szerokość: 500%; animacja: 30 s slidy nieskończona; rozmiar czcionki: 0; dopełnienie: 0; margines: 0; lewy: 0; )

Część 2.

Zrobiliśmy mega fajne suwak bez javascript. A zanim spoczniemy na laurach, dodajmy do niego przyciski sterujące. Dokładniej nie w to (jestem już zbyt leniwy, żeby się z tym bawić), ale stwórzmy nowy.

Więc nasz kod HTML to:

Teraz zajmijmy się animacją naszych slajdów. Niestety dla innej liczby slajdów będzie inaczej:

/* dla suwaka z dwoma slajdami */ @keyframes slider__item-autoplay_count_2 ( 0%(opacity:0;) 20%(opacity:1;) 50%(opacity:1;) 70%(opacity:0;) 100% ( krycie:0;) ) /* dla suwaka z trzema slajdami */ @keyframes slider__item-autoplay_count_3 ( 0%(przezroczystość:0;) 10%(przezroczystość:1;) 33% (krycie:1;) 43% ( krycie: 0;) 100%(opacity:0;) ) /* dla suwaka z czterema slajdami */ @keyframes slider__item-autoplay_count_4 ( 0%(opacity:0;) 8% (krycie:1;) 25% (krycie: 1; ) 33% (krycie:0;) 100%(krycie:0;) ) /* dla suwaka z pięcioma slajdami */ @keyframes slider__item-autoplay_count_5 ( 0%(krycie:0;) 7% (krycie:1 ;) 20%(krycie:1;) 27% (krycie:0;) 100%(krycie:0;) )

Smutne, prawda? Ponadto nie zapominaj, że w przypadku Opery, Chrome, IE i Mozilli musisz napisać wszystko tak samo, ale z odpowiednim prefiksem. Teraz napiszmy kod do animowania naszych slajdów (poniżej zostanie pokazany kod dla trzech slajdów. Możesz zobaczyć kod dla większej liczby witryn w przykładowym kodzie):

Slider_count_3 .item ( -moz-animation: slider__item-autoplay_count_3 15s nieskończony; -webkit-animation: slider__item-autoplay_count_3 15s nieskończony; -o-animation: slider__item-autoplay_count_3 15s nieskończony; animacja: slider__item-autoplay_count_3 nieskończona; -o-animacja: slider__item-autoplay_count_3 15s nieskończona; animacja: slider__item-autoplay_count_3 -of-type(2) ( -moz-animation-delay:5s; -webkit-animation-delay:5s; -o-animation-delay:5s; Animation-delay:5s; ) .item:nth-of-type (3) ( -moz-animation-delay:10s; -webkit-animation-delay:10s; -o-animation-delay:10s; Animation-delay:10s; )

Jak widać, dla pierwszej pary przesunięcie zera się nie zmienia. Ponadto przesunięcie nie zależy od liczby slajdów, więc można je opisać raz dla maksymalnej liczby slajdów. Teraz upewnijmy się, że slajdy nie zmieniają się, gdy użytkownik najedzie na nasz suwak:

Slider:hover .item ( -moz-animation-play-state: wstrzymane; -webkit-animation-play-state: wstrzymane; -o-animation-play-state: wstrzymane; animacja-stan odtwarzania: wstrzymane; )

Wreszcie przeszliśmy do zamiany slajdów. Jak wiadomo, istnieje cała linia zdarzenia, które pozwalają zmienić właściwości elementu, gdy Pomoc CSS. Do kliknięcia myszą możemy użyć pseudoklas :focus , :target lub :checked na jednym z elementów strony. Pseudoklasa :focus może mieć tylko jeden element na stronie, :target zanieczyszcza historię przeglądarki i wymaga znacznika; pseudoklasa :checked zapamiętuje stan przed opuszczeniem strony i, w przypadku przycisków opcji, może być zaznaczona tylko na jednym elemencie w grupie. Wykorzystajmy to. Wstaw przed