V tomto návode vytvoríme skvelý posuvník CSS3. Použije sa efekt miznutia medzi snímkami. Okrem toho môžete pre každý obrázok použiť popis. Na usporiadanie informácií sa použije neusporiadaný zoznam. Snímky sa budú prepínať automaticky pomocou animácií CSS3.

HTML značky

Značenie HTML je veľmi jednoduché. Príklad má štyri snímky. Každý z nich pozostáva z obrázka (ako pozadia) a textu popisu v prvku div. Vkladanie ďalších sklíčok je veľmi jednoduché.

css

Posuvník používa CSS3 animácie anim_slides a anim_titles . Prvý sa aplikuje na jednotlivé snímky, druhý - na text popisu. Pozícia a priehľadnosť sa menia aj pre popis.

/* Posuvník */ .slides ( výška:300px; margin:50px auto; overflow:hidden; position:relative; width:900px; ) .slides ul ( list-style:none; position:relative; ) /* Animation Frames # anim_slides */ @-webkit-keyframes anim_slides ( 0 % ( nepriehľadnosť: 0; ) 6 % ( nepriehľadnosť: 1; ) 24 % ( nepriehľadnosť: 1; ) 30 % ( nepriehľadnosť: 0; ) 100 % ( nepriehľadnosť: 0; ) ) @-moz-keyframes anim_slides ( 0 % ( nepriehľadnosť: 0; ) 6 % ( nepriehľadnosť: 1; ) 24 % ( nepriehľadnosť: 1; ) 30 % ( nepriehľadnosť: 0; ) 100 % ( nepriehľadnosť: 0; ) ). snímky ul li ( nepriehľadnosť:0; pozícia:absolútna; horná:0; /* animácia css3 */ -názov-webkitu-animácie: anim_slides; -trvanie-webkitu-animácie: 24,0s; -funkcia-časovania-časovania-webkitu: lineárny; -webkit-animation-count: infinite; -webkit-animation-direction: normal; -webkit-animation-delay: 0; -webkit-animation-play-state: running; -webkit-animation-fill-mode : forwards; -moz-animation-name: anim_slides; -moz-animation-duration: 24.0s; -moz-animation-timing-function: linear; -moz-animation-ite pomer-počet: nekonečný; -moz-smer-animácie: normálne; -moz-animation-delay: 0; -moz-animation-play-state: beh; -moz-animation-fill-mode: dopredu; ) /* oneskorenia 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; ) . snímky 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 snímky animácie */ @-webkit-keyframes anim_titles ( 0 % ( vľavo: 100 %; nepriehľadnosť: 0; ) 5 % ( vľavo: 10 %; nepriehľadnosť: 1; ) 20 % ( vľavo: 10 %; nepriehľadnosť: 1; ) 25 % ( vľavo: 100 %; nepriehľadnosť: 0; ) 100 % ( vľavo: 100 %; nepriehľadnosť: 0; ) ) @-moz-keyframes anim_titles ( 0 % ( vľavo: 100 %; nepriehľadnosť: 0; ) 5 % ( vľavo: 10 %; nepriehľadnosť: 1; ) 20 % ( vľavo: 10 %; nepriehľadnosť: 1; ) 25 % ( vľavo: 100 %; nepriehľadnosť: 0; ) 100 % ( vľavo :100 %; opacity:0; ) ) .slides ul li div ( background-color:#000000; border-radius:10px 10px 10px 10px; box-shadow:0 0 5px #FFFFFF inset; color:#FFF FFF; font-size:26px; vľavo: 10 %; okraj:0 auto; padding:20px; poloha:absolútna; horná časť: 50 %; šírka: 200px; /* Animácia css3 */ -webkit-animation-name: anim_titles; -trvanie-animácie webkitu: 24,0 s; -funkcia-webkit-animation-timing:linear; -webkit-animation-iteration-count: infinite; -smer-webkitu-animácie: normálny; -webkit-animation-delay: 0; -webkit-animation-play-state: running; -webkit-animation-fill-mode: dopredu; -moz-názov-animácie: anim_titles; - trvanie-moz-animacie: 24. 0s; -moz-animačná-funkcia-časovania: lineárna; -moz-animation-iteration-count: infinite; -moz-smer-animácie: normálne; -moz-animation-delay: 0; -moz-animation-play-state: beh; -moz-animation-fill-mode: dopredu; )

4. novembra 2019 Záznam bol aktualizovaný

Jurij Nemets

Posuvníky zapnuté čistý CSS+ bonusový posúvač

Posuvníky CSS majú oproti posuvníkom Javascript určité výhody. Jednou z takýchto výhod je rýchlosť sťahovania. Nielenže sa obrázky pre posuvníky používajú vo veľkých veľkostiach (ak neexistuje optimalizácia pre rôzne obrazovky), načítanie skriptov tiež nejaký čas trvá. Ale v článku uvidíte len čisté CSS slidery.

Tu je to, čo som našiel na webovej stránke o posúvačoch:

1. Posuvník obrázkov CSS3

Posúvač CSS, ktorý používa prepínače na navigáciu medzi snímkami. Tieto prepínače sú umiestnené pod posúvačmi. Okrem prepínačov sa navigácia vykonáva aj pomocou šípok vľavo a vpravo. Na sledovanie toho, ktorý obrázok sa má teraz zobraziť, sa používajú pseudotriedy :checked.

2. Posuvník obrázkov CSS3 s miniatúrami

Na rozdiel od predchádzajúceho posúvača CSS sú tu namiesto prepínačov v spodnej časti umiestnené miniatúry všetkých obrázkov, čo je tiež výhodné pri vytváraní galérie obrázkov. Obrázky sa menia so zvláštnym efektom: pri zväčšení hladko miznú.

3. Galéria CSS

Ale tento posúvač CSS je ideálny na predaj stránok. Pri vývoji vstupných stránok (predaj stránok) mnoho webových vývojárov spravidla umiestňuje posuvník na úplný začiatok, aby návštevník hneď na prvej obrazovke (bez rolovania) videl všetky výhody, ktoré pre neho táto stránka má. Tento posuvník je predovšetkým citlivý, čo je tiež príjemné.

4. CSS slider bez odkazov

Len chcem poznamenať, že tento posúvač nepoužíva odkazy! Štandardne sú okrem hlavného obrázka (snímky) viditeľné ešte 2 snímky. Sú umiestnené za hlavnou. Výmena sklíčok prebieha v krásnom režime: najprv sa dve sklíčka od seba odsunú a sklíčko sa dostane do stredu, ktorý sa potom stane hlavným. Sklíčko sa potom zväčší a umiestni pred ostatné.

5. CSS3 responzívny posúvač

Ďalší adaptívny posúvač založený na prepínačoch. Ak chcete vidieť, ako bude tento posúvač vyzerať rôzne zariadenia ah - Okno prehliadača môžete zmeniť sami, alebo na stránke s posúvačom sú špeciálne ikony pre rôzne zariadenia, kliknutím na ktoré uvidíte vzhľad posúvača na počítači, tablete alebo smartfóne.

*** BONUSOVÝ POSUVNÍK ***

Okrem všetkých posuvníkov, ktoré sú uvedené vyššie, vás chcem potešiť ešte jedným. Tento posúvač je skvelý na vytváranie galérie obrázkov. Slová nedokážu vysvetliť, čo robí, takže je lepšie pozrieť si všetko na videu:

Záver

Pomocou posúvačov môžete krásne navrhnúť galérie obrázkov, umiestniť ich kompaktnejšie, vložiť posúvač do prvej obrazovky (časť stránky, ktorá je viditeľná bez posúvania) predajnej stránky, aby ste návštevníkovi okamžite ukázali hlavné výhody, ktoré dostane. Stále sa dá nájsť množstvo spôsobov, kde a ako použiť posuvníky, no jedno je jasné – pri správnom používaní sú užitočné.

Položky uvedené v článku.

Čas sa nezastaví a s ním aj pokrok. To ovplyvnilo aj internet. Už vidíte zmenu vzhľad stránky, obzvlášť populárne adaptívny dizajn. A ako výsledok, veľa nových responzívne posúvače jquery, galérie, kolotoče alebo podobné pluginy.
1. Citlivý posúvač horizontálnych stĺpikov

Responzívny horizontálny karusel s podrobný návod inštaláciou. Je vyrobený v jednoduchom štýle, ale môžete si ho upraviť podľa seba.

2. Prejdite na Glide.js

Tento posuvník je vhodný pre akúkoľvek webovú stránku. Toto používa Glide.js s open source. Farby posúvača sa dajú ľahko meniť.

3. Naklonená prezentácia obsahu

Responzívny posúvač obsahu. Vrcholom tohto posúvača je 3D efekt obrázkov, ako aj rôzne animácie náhodného vzhľadu.

4. Posúvajte sa pomocou plátna HTML5

Veľmi krásny a pôsobivý posúvač s interaktívnymi časticami. Vyrobené na plátne HTML5

5. Posuvník Morphing Image

Posuvník s efektom morfovania (plynulá transformácia z jedného objektu na druhý). AT tento príklad slider je vhodný pre portfólio webového vývojára alebo webového štúdia vo forme portfólia.

6. Kruhový posúvač

Posuvník vo forme kruhu s efektom prevrátenia obrázka.

7. Posuvník rozmazaného pozadia

Citlivý posúvač s prepínaním a rozostrením pozadia.

8. Responzívny módny posuvník

Jednoduchý, ľahký a responzívny posúvač webových stránok.

9. Slicebox – posúvač 3D obrázkov jQuery(AKTUALIZOVANÉ)

Aktualizovaná verzia posúvača Slicebox s opravami a novými funkciami.

10. Bezplatná animovaná mriežka citlivých obrázkov

Doplnok jQuery na vytváranie flexibilnej mriežky obrázkov, ktorá bude prepínať zábery pomocou rôznych animácií a časovania. To môže vyzerať dobre ako pozadie alebo dekoratívny prvok na stránke, keďže môžeme nastaviť selektívny vzhľad nových obrázkov a ich prechodov. Plugin je vyrobený v niekoľkých verziách.

11.Posuvník Flex

Univerzálny bezplatný plugin pre váš web. Tento doplnok sa dodáva vo viacerých možnostiach posúvača a karuselu.

12. Fotorámik

Fotoráma je univerzálny plugin. Má veľa nastavení, všetko funguje rýchlo a jednoducho, je možné prezerať snímky na celej obrazovke. Posuvník je možné použiť v pevnej veľkosti aj prispôsobivej, s miniatúrami aj bez nich, s kruhovým posúvaním aj bez neho a oveľa viac.

P.S.Jazdec som dal niekoľkokrát a myslím si, že je jeden z najlepších

13. Bezplatný a responzívny posúvač galérie 3D miniatúr.

Galéria experimentálnych posúvačov 3DPanelLayout s mriežkou a zaujímavými animačnými efektmi.

14. Posuvník na css3

Responzívny posúvač vytvorený pomocou css3 s plynulým vzhľadom obsahu a svetelnou animáciou.

15. Posuvník WOW

Posuvník WOW je posúvač obrázkov s úžasnými vizuálnymi efektmi.

17.Elastický

Elastický posúvač s plnou odozvou a miniatúrami snímok.

18. Štrbina

Toto je posúvač reagujúci na celú obrazovku využívajúci animáciu css3. Posuvník sa vyrába v dvoch verziách. Animácia je urobená dosť nezvyčajne a krásne.

19. Responzívna fotogaléria plus

Jednoduchá bezplatná galéria posúvačov s nahrávaním obrázkov.

20. Responzívny posúvač pre WordPress

Responzívny bezplatný posúvač pre WP.

21. Posuvník obsahu paralaxy

Posuvník s efektom paralaxy a ovládaním každého prvku pomocou CSS3.

22. Slider s notovou väzbou

Posuvník pomocou open source JPlayer. Tento posuvník pripomína prezentáciu s hudbou.

23. Posuvník s jmpress.js

Responzívny posuvník je založený na jmpress.js a umožní preto na snímky aplikovať zaujímavé 3D efekty.

24. Rýchla prezentácia s prechodom

prezentácia s rýchle prepínanie diapozitívov. Snímky sa prepínajú pri umiestnení kurzora myši.

25. Obrazový akordeón s CSS3

Obrazový akordeón s css3.

26. Dotknite sa Doplnku Optimalizovaná galéria

to adaptívna galéria ktorý je optimalizovaný pre dotykové zariadenia.

27. Galéria 3D

3D nástenná galéria- vytvorené pre prehliadač Safari, kde bude viditeľný 3D efekt. Pri zobrazení v inom prehliadači bude funkčnosť v poriadku, ale 3D efekt nebude viditeľný.

28. Posuvník so stránkovaním

Responzívny posúvač stránkovania s posúvačom používateľského rozhrania jQuery. Cieľom je použiť jednoduchý navigačný koncept. Je možné pretáčať všetky obrázky alebo prepínať medzi snímkami.

29. Montáž obrázka pomocou jQuery

Automatické usporiadanie obrázkov v závislosti od šírky obrazovky. Veľmi užitočná vec pri vývoji portfóliovej stránky.

30. Galéria 3D

Jednoduchý 3D kruhový posuvník v css3 a jQuery.

31. Režim celej obrazovky s 3D efektom na css3 a jQuery

Posuvník s možnosťou zobrazenia obrázkov na celej obrazovke s krásnym prechodom.

1. Doplnok jQuery Fresco

Responzívna galéria jquery (zmení veľkosť pri zmene rozlíšenia obrazovky) zobrazená v kontextovom okne s miniatúrami a popismi obrázkov. jquery fresco gallery funguje správne vo väčšine prehliadačov vrátane: IE6+, Firefox 3+, Chrome 5+, Opera 9+. Bezplatnú verziu tohto pluginu je možné použiť iba na nekomerčné projekty.

2. Posuvník "Adaptér".

Posuvník s rôznymi prechodovými efektmi (7 rôznych efektov vrátane 3D). Projekt na Github.

3. Posuvný plugin s rôznymi efektmi "jQ-Tiles"

Plugin s rôznymi prechodovými efektmi, s nastaviteľnou rýchlosťou posúvania, s funkciou automatického posúvania.

4. Doplnok jQuery "Sly"

Plugin na implementáciu vertikálneho a horizontálneho posúvača. Projekt na Github.

5. Animované CSS3 Makisu Menu

6. Jednoduchá prezentácia

7. Funkčný posúvač jQuery „iView Slider v2.0“

Posuvník obsahu / prezentácia (ako prezentáciu možno použiť nielen obrázky, ale aj videoklipy a ďalšie HTML obsah). Na navigáciu môžete použiť: miniatúry, tlačidlá doľava / doprava a pomocou klávesnice. Projekt na Github.com.

8. Sada doplnkov jQuery „Vanity“

V sade je 7 pluginov: jSlider, jTabs, jPaginate, jSpotlight, jTip, jPlaceholder a jCollapse. Sada týchto riešení vám pomôže implementovať posúvače, popisy nástrojov, karty, kontextové okná s obrázkami a ďalšie.

9. Umiestnite kurzor myši na efekt CSS3

10. Rozbaľovacia ponuka CSS3

11.iOSlider

Posuvník navrhnutý na prácu na mobilných zariadeniach.

12. Indikátor načítania CSS3

13. CSS3 efekt vznášania

14. Doplnok jQuery „Colorizer produktov“.

Plugin je odľahčené riešenie na prezeranie produktov v rôznych farbách (relevantné napríklad pre online obchody s oblečením, aby si návštevníci mohli vybrať farebná schéma produkt z niekoľkých možností). Doplnok vyžaduje iba dva obrázky pre každý produkt (všetky farby budú prekryté ako maska). Doplnok funguje vo všetkých hlavných prehliadačoch vrátane IE7+ (bude fungovať aj v IE6, ak opravíte displej priehľadnosť PNG). Projekt na GitHub.

15. Animované grafy CSS3

16. Vytvorenie efektu prekrytia pri kliknutí na obrázok

Keď kliknete na obrázok, stmavne, prejde na pozadie a objavia sa odseky s titulkami. Tak je možné dať Stručný opis prvky na obrázku.

17. Navigácia na stránke vo forme roletového menu

Riešenie pre implementáciu pohodlnej navigácie v dokumentoch vo forme roletového menu. Obsah je pevne stanovený v hornej časti obrazovky a vždy zostáva v zornom poli návštevníka. Keď vyberiete sekciu v ponuke, plynulé rolovanie stránku do vybranej časti dokumentu.

18. CSS3 galéria s efektom vznášania

Keď prejdete myšou na obrázok, dôjde k rýchlej zmene fotografií. Galéria je implementovaná v dvoch verziách: s popisom obrázkov, ktorý sa zobrazí po presunutí kurzora návštevníka preč z galérie a bez popisu.

19. Parallax Slider jQuery

20. CSS3 animácia vznášania sa na blokoch

21. Vyskakovací panel CSS3 jQuery

Kliknutím na šípku v spodnej časti obrazovky na stránke ukážky zobrazíte kontextové ikony.

22. Bezplatná galéria obrázkov HTML5 "Juicebox Lite"

Veľmi funkčná nová galéria obrázkov pre túto stránku. Galéria môže byť buď s náhľadmi alebo bez nich, s popisom obrázka alebo bez neho, možno ju rozbaliť na celú obrazovku alebo zobraziť na stránke s pevnými veľkosťami. Na stránke ukážky si môžete vybrať typ galérie, ktorý sa vám páči. K dispozícii na stiahnutie bezplatná verzia galérií. Za pokročilejšie funkcie a odstránenie loga vývojára budete musieť zaplatiť.

23. Plugin "JQVMap"

24. CSS3 Parallax Slider

25. jQuery fotogaléria s náhľadmi

Veľkosť responzívnej galérie, obrázkov a miniatúr sa mení s veľkosťou okna prehliadača.

26. Doplnok posúvača obsahu jQuery "Horinaja"

Doplnok sa ľahko inštaluje, je prispôsobiteľný a používa sa v rôznych prehliadačoch. Akýkoľvek obsah HTML môže fungovať ako snímka, nielen obrázky. V snímkach môžete rolovať pomocou kolieska myši, keď je kurzor na ploche snímky.

27. Zásuvný modul jQuery Pikachoose

V troch variantoch: implementácia jednoduchej zmeny obrázkov bez popisu a miniatúr; posúvač s popismi obrázkov a miniatúrami; posuvník s miniatúrami a pridaným otváraním väčšieho obrázka vo vyskakovacom okne s efektom FancyBox. Najnovšiu verziu vždy nájdete na Github.

28. Niektoré vlastné štýly CSS pre rozbaľovacie zoznamy

Päť rôznych štýlov rozbaľovacích zoznamov pomocou rôznych techník CSS.

29. Menu reštaurácie s animovaným 3D efektom

Zaujímavá CSS jQuery prezentácia informácií na stránke. Kliknutím na odkaz sa otvorí ponuka brožúry a návštevník si môže prečítať viac o ponúkaných jedlách vo vyskakovacom okne. Animácia sa v IE nezobrazuje správne.

30. Elastislide plugin

Implementácia gumeného adaptívneho karuselu (vertikálny a horizontálny karusel obrázkov) a galérie obrázkov. Keď sa okno prehliadača zmenší, počet obrázkov sa zníži na určitú hodnotu minimálna hodnota a potom sa upraví veľkosť zostávajúcich obrázkov. Projekt na Github.

31. Fresh CSS3 jQuery Slit Slider

Responzívny slider plugin (šírka sa dá nastaviť v percentách a automaticky sa škáluje) v dvoch štýloch so zaujímavým animovaným efektom pri výmene snímok (snímka sa rozreže na polovicu a posunie sa od seba rôzne strany a na jeho miesto nastúpi nový). Navigácia pomocou klávesnice je možná. Najnovšia verzia vždy na Github.

32. Nová verzia posúvača 3D obrázkov „Slicebox“

Nová verzia s vykonanými zmenami a pridaním nových funkcií: teraz sa 3D posuvník stal škálovateľným, môžete to vidieť, keď zmenšíte okno prehliadača; Pridaná podpora pre Firefox; v popise snímky už môžete použiť obsah HTML (predtým bol popis stiahnutý z atribútu link bez možnosti použiť HTML tagy). Na stránke s ukážkou môžete vidieť 4 možnosti použitia pluginu. Najnovšia verziažije na Github.com.

Efekt je veľmi podobný 3D CU3ER Flash Gallery (demo , download), len tento 3D slider nie je vyrobený s blesk technológie, ale pomocou javascriptu.

33.jQuery Plugin "PFold"

Experimentálne riešenie. Doplnok implementuje 3D efekt s imitáciou rozohrávanej noty. Rôzne verzie: s tromi nátierkami, s dvoma nátierkami a nátierkou s následným centrovaním expandovanej noty.

34.jQuery Plugin "Windy"

Doplnok na navigáciu v obsahu, ako sú obrázky. Pri posúvaní fotografií sa rozptyľujú rôznymi smermi (efekt trochu pripomína rozloženie kariet v kartovej hre pokru). Na navigáciu môžete použiť ľavé/pravé tlačidlo alebo posuvný ovládač (rôzne možnosti nájdete na ukážkovej stránke). Projekt zapnutý

Práca na knihe o jQuery, narazil som na skutočnosť, že mnohí z mojich predplatiteľov ma požiadali, aby som v ňom povedal, ako napísať posuvný skript v jquery. Prepáčte, drahí priatelia! Na dvore 21. storočia a našťastie máme prístup ku všetkým pôžitkom CSS3, čo nám umožňuje realizovať takéto veci bez jediného riadku javascript.

Časť 1.

Na začiatok vysvetlím tým, ktorí nevedia, čo je slider. Posúvač- je to blok určitej šírky, ktorý zaberá časť webovej stránky alebo jej celú. Jeho hlavnou črtou pri zmene v automatickej resp manuálny mód obsahu. Obsah môže byť grafické obrázky a nejaký text.

Samozrejme, môžete sa opýtať: prečo znovu vynájsť koleso, keď je v javascripte veľa implementácií posuvníkov? Tu sú moje argumenty:

1. CSS efekty fungujú rýchlejšie. To je jasne viditeľné na mobilných zariadeniach.
2. Na vytvorenie posúvača nie sú potrebné žiadne znalosti programovania.

Takže pre náš príklad potrebujete štyri obrázky, hoci vo svojom projekte môžete vytvoriť pás s toľkými obrázkami, koľko potrebujete. Jedinou podmienkou je, že všetky obrázky musia mať rovnakú veľkosť. Tiež som vám zabudol povedať, že náš posuvník bude adaptívny (áno, áno, Adaptívne rozloženie , čítate správne) a môžete ho použiť v akomkoľvek svojom projekte pre akékoľvek zariadenie. Ale dosť bolo klebetenia, už ma svrbia ruky písať megakód. Začnime s HTML:

Atribút alt som nechal prázdny, aby som ušetril miesto, ale môžete si ho vyplniť sami na základe vašich požiadaviek SEO a informovať používateľov, ktorí v prehliadači zakázali obrázky. Chcem tiež upozorniť na skutočnosť, že prvý obrázok ( alladin.jpg) bude tiež prítomný na konci prúžku, čo umožní nášmu posúvaču sa cyklicky posúvať bez trhania.

Pre pohodlie je šírka 80 % okna a maximálna šírka je veľkosť každej jednotlivej fotografie (v našom príklade 1 000 pixelov), pretože nechceme, aby bol obrázok roztiahnutý:

Posúvač ( šírka: 80 %; maximálna šírka: 1 000 pixelov; )

V našom kóde CSS je šírka obrázku vyjadrená ako percento prvku div, v ktorom sa nachádza. To znamená, že ak pás obrázka obsahuje päť fotografií a prvok div vykreslí iba jednu, šírka obrázku sa zväčší päťkrát, čo je 500 % šírky prvku div kontajnera:

Nastavenie veľkosti písma: 0 vyfúkne všetok vzduch z obrázku a odstráni biely priestor okolo a medzi obrázkami. poloha: relatívna uľahčuje pohyb figúrky počas animácie.

Musíme rozdeliť fotografie rovnomerne v rámci obrazového pásu. Vzorec je veľmi jednoduchý: ak predpokladáme, že obrázok je 100% široký, každý obrázok by mal zaberať 1/5 horizontálneho priestoru:

Je potrebné použiť nasledujúce pravidlo CSS:

Imagestrip img ( šírka: 20 %; výška: auto; )

Teraz sa poďme zmeniť prepadová vlastnosť pre div:

Posúvač ( šírka: 80 %; maximálna šírka: 1 000 pixelov; pretečenie: skryté )

Nakoniec musíme posunúť obrazový pás zľava doprava. Ak je šírka kontajnera div 100 %, každý pohyb obrazového pruhu doľava bude meraný ako percento tejto vzdialenosti:

@kľúčové snímky posuvné ( 20 % ( vľavo: 0 %; ) 25 % ( vľavo: -100 %; ) 45 % ( vľavo: -100 %; ) 50 % ( vľavo: -200 %; ) 70 % ( vľavo: -200 %; ) 75 % (vľavo: -300 %; ) 95 % (vľavo: -300 %; ) 100 % (vľavo: -400 %; ) )

Každý obrázok na posúvači bude zabalený do prvku div a posunie sa o 5 %.

Obrázok jazdca ( pozícia: relatívna; šírka: 500 %; animácia: 30 s posuvná nekonečná; veľkosť písma: 0; výplň: 0; okraj: 0; vľavo: 0; )

Časť 2.

Urobili sme mega-cool posuvník bez javascriptu. A poďme, kým si oddýchneme na vavrínoch, pridajme k tomu ovládacie tlačidlá. Presnejšie, nie do nej (už som lenivý sa s tým motať), ale poďme si vytvoriť novú.

Náš HTML kód je teda:

Teraz sa postarajme o animáciu našich snímok. Bohužiaľ, pre iný počet snímok to bude iné:

/* pre dvojsnímkový posúvač */ @keyframes slider__item-autoplay_count_2 ( 0%(opacity:0;) 20%(opacity:1;) 50%(opacity:1;) 70%(opacity:0;) 100% ( opacity:0;) ) /* pre trojsnímkový posúvač */ @keyframes slider__item-autoplay_count_3 ( 0%(opacity:0;) 10%(opacity:1;) 33% (opacity:1;) 43% ( nepriehľadnosť: 0;) 100 % (nepriehľadnosť: 0;) ) /* pre štvorsnímkový posuvník */ @keyframes slider__item-autoplay_count_4 ( 0%(nepriehľadnosť:0;) 8% (nepriehľadnosť:1;) 25% (nepriehľadnosť: 2 ;) 20 %(nepriehľadnosť:1;) 27% (nepriehľadnosť:0;) 100%(nepriehľadnosť:0;) )

Smutné, však? Okrem toho nezabudnite, že pre Opera, Chrome, IE a Mozilla musíte napísať všetko rovnako, ale s príslušnou predponou. Teraz napíšme kód na animáciu našich snímok (ďalej sa zobrazí kód pre tri snímky. Kód pre viac stránok môžete vidieť vo vzorovom kóde):

Slider_count_3 .item ( -moz-animation: slider__item-autoplay_count_3 15s infinite; -webkit-animation: slider__item-autoplay_count_3 15s infinite; -o-animation: slider__item-autoplay_count_3 15s slider_infinite;item) slider_itemplay; -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; )

Ako vidíte, pre prvý pár sa nulový posun nemení. Offset navyše nezávisí od počtu snímok, takže pre maximálny počet snímok sa dá opísať raz. Teraz sa uistite, že sa snímky nemenia, keď používateľ umiestni kurzor myši na náš posúvač:

Slider:hover .item ( -moz-animation-play-state: paused; -webkit-animation-play-state: paused; -o-animation-play-state: paused; animation-play-state: paused; )

Nakoniec sme sa dostali k prepínaniu snímok. Ako je známe, existuje celý riadok udalosti, ktoré umožňujú zmeniť vlastnosti prvku, keď Pomocník CSS. Na kliknutie myšou môžeme použiť pseudotriedy :focus , :target alebo :checked na jednom z prvkov stránky. Pseudotrieda :focus môže mať iba jeden prvok na stránku, :target znečisťuje históriu prehliadača a vyžaduje značku; pseudotrieda :checked si pamätá stav pred opustením stránky a v prípade prepínačov môže byť vybratá iba na jednom prvku v skupine. Využime toto. Vložiť pred