Listopad 4, 2019 Príspevok bol aktualizovaný
Jurij Nimetz
Čistý CSS posuvník + bonusový posuvník
Posuvníky CSS sú oveľa lepšie ako posuvníky Javascript. Jednou z týchto výhod je flexibilita príťažlivosti. Okrem toho sa obrázky pre posúvače vytvárajú vo veľkých veľkostiach (pretože neexistuje žiadna optimalizácia Rôzne obrazovky), toľko hodín sa strávi získavaním skriptov. Ale u statti Viac posuvníkov vytvoríte pomocou čistého CSS.
Čo viem o posúvačoch na stránke:
1. Posuvník obrázkov CSS3
Posuvník CSS, ktorý sa používa na navigáciu v snímkach, prepínače. Tieto prepínače sa nachádzajú pod posúvačom. Okrem prepínačov funguje navigácia pomocou šípok doľava a doprava. Aby sme to sledovali, keď sú obrázky súčasne pretvárané, pseudotriedy sú vikorizované: kontrolované.
2. CSS3 posuvný displej s miniatúrami
Okrem predchádzajúceho posúvača CSS sú tu namiesto prepínačov v spodnej časti rozšírené miniatúry všetkých obrázkov, čo sa deje aj manuálne pri vytváraní galérie obrázkov. Obrázky sa menia s iným efektom: postupne sa zväčšujú.
3. Galéria s CSS
A tento posúvač osi na CSS je ideálny pre stránky, ktoré predávajú. Pri vývoji vstupných stránok (predaj stránok) mnoho webových vývojárov spravidla umiestňuje posúvač na úplný začiatok, takže na prvej obrazovke (bez posúvania) môžete okamžite vidieť všetky výhody, ktoré sú na tejto stránke k dispozícii. , Tento posuvník je navyše adaptívny, ktorý je navyše tichý.
4. Bez námahy prejdite na CSS
Chcel by som okamžite poznamenať, že tento posúvač nie je posolstvom vikory! Za pozadím, vedľa obrázka hlavy (slide), môžete vidieť ďalšie 2 snímky. Zápach bol odstránený až do jeho jadra. Výmena sklíčok sa vykonáva v krásnom režime: na začiatku sa otvoria dve sklíčka a sklíčko, ktoré sa neskôr stane hlavným, je v strede. Potom sa šmykľavka zväčší a umiestni sa pred ostatné.
5. Responzívny posúvač CSS3
Ešte jeden adaptívny posúvač, ktorého ovládanie je založené na prepínačoch. Len sa čudujte, ako bude tento posúvač vyzerať rôzne prístavby ah - Okno prehliadača môžete zmeniť buď samostatne, alebo na strane s posúvačom sú stlačené špeciálne ikony rôznych zariadení, na počítači, tablete alebo smartfóne môžete získať viditeľný posúvač.
***BONUSOVÝ POSUVNÍK***
Okrem všetkých prezentovaných posúvačov vás chcem potešiť ešte jedným. Tento posúvač je ideálny na vytvorenie galérie obrázkov. Ak nemôžete slovami vysvetliť, čo musíte urobiť, je lepšie žasnúť nad všetkým vo videu:
Višňovok
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 možné vidieť bez posúvania) stránky, ktorú predávate, a okamžite zobraziť hlavné výhody, ktoré sú odobraté. Spôsobov, ako zmraziť posuvníky, nájdete množstvo, no jedno je isté – pri správnom používaní zapáchajú.
Body, ktoré skúmali štatistiky.
Zbierka zadarmo Posuvník HTML a CSS príklady kódu: karta, porovnanie, celá obrazovka, responzívne, jednoduché, atď.
Aktualizácia kolekcií z júna 2018. 7 nových prvkov.
Obsah
Súvisiace články
O kóde
Sada úvodných obrazoviek v HTML/CSS/JS. Osobný experiment s vrstvením ikon PNG, prechodmi CSS3 a flexboxom.
Posuvník informačnej karty HTML, CSS a JavaScript.
Vyrobil Andy Tran
23. novembra 2015
Posuvník fotografií fungujúci na stolných a mobilných prehliadačoch.
Vyrobil Taron
29. septembra 2014
Súvisiace články
Porovnávače (pred/po) posuvníky
Súvisiace články
Výkonný a čistý posúvač porovnávania obrázkov, plne citlivý a pripravený na dotyk pomocou CSS a jQuery.
Súvisiace články
Posuvník pred a po iba s html a css.
Napíšte naraz s novou myšlienkou, vikorystyuchi moje dve písmená pred obrazom fotografie. Udržiavať ho na minime. Zachováva to vanilku. Nech sa páči, ak je to užitočné :)
Vanilla JS, minimálna, na pohľad elegantná.
Vyrobil Huw
Súvisiace články
3. júla 2017
Posuvný prvok „rozdelenej obrazovky“ s JavaScriptom.
Krátky experiment osi pre posúvač pred a po, všetko vo vnútri SVG. Maskovanie to robí celkom jednoduchým. Keďže je to všetko vo formáte SVG, obrázky a titulky sa pekne prispôsobia. Zásuvné moduly Draggable a ThrowProps od GreenSock pre ovládač.
Vyrobil Craig Roblewsky
17. apríla 2017
Vikorist je vstupný vstup do kuchyne pre posuvník.
Vyrobil Dudley Storey
14. októbra 2016
Responzívny posúvač porovnávania obrázkov s HTML, CSS a JavaScript.
Vyrobil Ege Görgülü
3. augusta 2016
Vikorist je vstupný vstup do kuchyne pre posuvník.
HTML5, CSS3 a JavaScript video pred porovnávacím posúvačom.
24. apríla 2016
Praktický posuvný posúvač na rýchle porovnanie 2 obrázkov s podporou CSS3 a jQuery.
Vyrobené spoločnosťou CodyHouse
15. september 2014
Súvisiace články
Posuvníky na celú obrazovku
Jednoduchý posuvník založený na rádiových vstupoch. 100% čisté HTML + CSS. Funguje aj so šípkami.
Reagujúce: áno
Súvisiace články
Závislosti: -
Súvisiace články
Horizontálny posuvný posúvač paralaxy s Swiper.js.
Súvisiace články
Responzívny plynulý posúvač 3D perspektívy pri pohybe myšou.
Posuvník hrdinského obrázka na celú obrazovku (téma potiahnutia panelov) s HTML, CSS a JavaScript.
Vyrobil Tobias Bogliolo
25. júna 2017
Ďalšia vec interakcie s použitím efektov Velocity a Velocity (UI Pack) na zvýšenie animácie. Animácia sa spúšťa pomocou šípok, navigačného kliknutia alebo rolovacieho konektora. Táto verzia obsahuje hranice ako súčasť interakcie.
Vyrobil Stephen Scaff
11. mája 2017
Jednoduchý posúvač v minimálnom štýle na predvádzanie obrázkov. Na každej snímke vyskočí časť obrázka.
Vyrobil Nathan Taylor
22. januára 2017
Vec je celkom ľahko prispôsobiteľná. Môžete bezpečne zmeniť písmo, veľkosť písma, farbu písma, rýchlosť animácie. Prvý arkush pre nový reťazec v poli v JS sa objaví na nočnej snímke. Jednoduché vytvorenie (alebo odstránenie) novej snímky: 1. Pridajte nové mesto do poľa v JS. 2. Zmena premennej čísla obrázka a vloženie obrázka aw do zoznamu scss v CSS.
Vyrobil Ruslan Pivovarov
8. októbra 2016
- Clip-path pre obdĺžnikový okraj maskovania obrazu (iba webkit).
- Režim miešania pre túto masku.
- Inteligentný systém farieb, stačí zadať názov farby a hodnotu do mapy sass a potom pridať triedu vlastnosti s týmto názvom farby k prvkom a všetko bude fungovať!
- Skvelá bočná ponuka kreditov (kliknite na malé tlačidlo v strede ukážky).
- Vanilla js s just< 200 lines of code (basically it’s just adds/removes classes).
7. októbra 2016
Táto skrútená vlásenka je viazaná na čistý JS a CSS (bez knižníc).
Vyrobil Victor Belozyorov
3. septembra 2016
Posuvná animácia s dizajnom Pokémona.
Vyrobil Pham Mikun
18. august 2016
Posuvník HTML, CSS a JavaScritp s komplexnou animáciou a polofarebným šikmým textom.
Vyrobil Ruslan Pivovarov
13. júla 2016
Efekt paralaxy posúvača s HTML, CSS a JavaScript.
Vyrobil Manuel Madeira
28. júna 2016
Posuvník HTML, CSS a JavaScript s efektom repliky.
Vyrobil Pedro Castro
21. mája 2016
Posuvník odhaľujúci Clip-Path s HTML, CSS a JavaScript.
Vyrobil Nikolay Talanov
16. mája 2016
GSAP + Slick slider s náhľadom predchádzajúcich/nasledujúcich snímok.
Vyrobil Karlo Videk
27. apríla 2016
Posuvník celej stránky HTML, CSS a JavaScript.
Vyrobil Joseph Martucci
28. februára 2016
Kompletný prototyp posuvníka s HTML, CSS a JavaScript.
Vyrobil Gluber Sampaio
6. januára 2016
Celoobrazovková prezentácia reagujúca na triedenie animovaná pomocou Greensocks TweenLite/Tweenmax.
Vyrobil Arden
12. december 2015
5. december 2015
Posuvník na celú obrazovku (časová os GSAP) č. 1 s HTML, CSS a JavaScript.
Vyrobil Diaco M.Lotfollahi
Vyrobil Andy Tran
Posuvník HTML a CSS s vlastnými efektmi.
Vyrobil Nikolay Talanov
12. novembra 2015
Posuvný posúvač na celú obrazovku s paralaxou s HTML, CSS a JavaScript.
Vyrobil Nikolay Talanov
12. novembra 2015
Dôkaz koncepcie otočného posúvača. Pre ďalšiu pomoc klip-cesta a veľa matematiky.
Vyrobil Tyler Johnson
16. apríla 2015
Jednoduchý posúvač CSS a jQuery na celú obrazovku pomocou plynulosti translateX a translate3d!
Vyrobil Joseph
19. augusta 2014
Responzívne posúvače
Súvisiace články
Posuvník nepriehľadnosti obrázkov
Posuvník nepriehľadnosti obrázkov v HTML a CSS.
Kompatibilné prehliadače: Chrome, Edge, Firefox, Opera, Safari
Jednoduchý posuvník založený na rádiových vstupoch. 100% čisté HTML + CSS. Funguje aj so šípkami.
Reagujúce: áno
Súvisiace články
Skladané flexibilné rozloženie diapozitívov
Tento príklad ilustruje tie, ktoré vytvárajú rozmery snímok, ktoré sú rozložené na čomkoľvek inom (obzvlášť užitočné pri prechodoch zoslabovania/zväčšovania). Toto "je určené bez úpravy ich hĺbky a agresivity: absolútna; v dôsledku toho je mimoriadne flexibilná a ľahko sa udržiava v normálnom toku stránok.
Kompatibilné prehliadače: Chrome, Edge, Firefox, Opera, Safari
Jednoduchý posuvník založený na rádiových vstupoch. 100% čisté HTML + CSS. Funguje aj so šípkami.
Reagujúce: áno
Súvisiace články
Responzívny posúvač
Animovaný responzívny posúvač v HTML, CSS a JavaScript.
Kompatibilné prehliadače: Chrome, Edge, Firefox, Opera, Safari
Jednoduchý posuvník založený na rádiových vstupoch. 100% čisté HTML + CSS. Funguje aj so šípkami.
Závislosti: animate.css
Súvisiace články
Posuvník s maskovaným textom
CSS je len posuvník s maskovaným textom.
Kompatibilné prehliadače: Chrome, Edge (čiastočný), Firefox, Opera, Safari
Jednoduchý posuvník založený na rádiových vstupoch. 100% čisté HTML + CSS. Funguje aj so šípkami.
Reagujúce: áno
Súvisiace články
Obrázok a obsah s efektom paralaxy.
Súvisiace články
Galéria snímok iba CSS.
Kompatibilné prehliadače: Chrome, Edge, Firefox, Opera, Safari
Jednoduchý posuvník založený na rádiových vstupoch. 100% čisté HTML + CSS. Funguje aj so šípkami.
Reagujúce: áno
Súvisiace články
Čistý posúvač HTML/CSS
Čistý posúvač HTML/CSS s kruhovým ukazovateľom priebehu SVG.
Kompatibilné prehliadače: Chrome, Edge (čiastočný), Firefox (čiastočný), Opera, Safari
Jednoduchý posuvník založený na rádiových vstupoch. 100% čisté HTML + CSS. Funguje aj so šípkami.
Závislosti: font-awesome.css
Súvisiace články
Experimentujte s vytvorením kompletného responzívneho vertikálneho posúvača s miniatúrami iba pomocou CSS a so zachovaním pomeru strán obrázkov.
Súvisiace články
Jednoduchý posúvač obrázkov/kolotoč Flexbox vyrobený pomocou vanilkového JavaScriptu.
Súvisiace články
Ide o experiment, ktorý simuluje efekt rozmazania pohybu pri každom prepnutí snímky. Toto je výhoda filtra SVG Gaussian Blur a animácie kľúčových snímok CSS. Väčšina výsledkov nebude vyžadovať žiadny Javascript, aby fungoval ako celok, pričom verzia Javascriptu sa používa iba na funkčnosť na pozadí.
Súvisiace články
Skvelý animovaný posúvač s JS.
Súvisiace články
Toto je experiment o tom, ako nám vzory SVG môžu pomôcť vytvoriť maskované obrázky pre posúvač obrázkov iba v CSS.
Preskúmanie niektorých prechodov posúvača. Swiper posuvník s povolenou možnosťou paralaxy. Hrať sa s CSS filtrami je super.
Vyrobil Mirko Zorić
12. júna 2017
Jednoduchý posúvač GSAP s niekoľkými jemnými animáciami doplnenia.
Vyrobil Goran Vrban
9. júna 2017
Posuvné používateľské rozhranie s HTML, CSS a JavaScript.
Vyrobil Mergim Ujkani
6. júna 2017
Posuvník GSAP 2.
Vyrobil Em An
4. mája 2017
Malý tenký prechodový posúvač pomocou jednoduchého riešenia pridania triedy. Prezrite si bitku a víťazstvo na krátkych zariadeniach pre mobilné zariadenia (stačí naskladať, pridať dotykové udalosti, vytvoriť obrázky v plnej výreze atď. Podporuje rolovacie koliesko (scroll jacking), navigačné tlačidlá a klávesy so šípkami. aby obrázky vyplnili výrez v ich neviditeľnom stave, čo je tiež v pohode.
Vyrobil Stephen Scaff
3. januára 2017
Využite CSS okrajový obrázok a klipovú cestu pre efekt kreatívnej animácie.
Vyrobila Emily Hayman
31. decembra 2016
Malý posuvník s flexboxom. Herectvo, kto potvrdzuje, a môže byť pevnými prvkami v spodnej časti kúzelníka.
Vyrobil Robert
28. novembra 2016
HTML, CSS canvas slider.
Vyrobené spoločnosťou Nvagelis
29. októbra 2016
HTML, CSS a JavaScript 3D hladký posuvník.
Vyrobil Eduardo Allegrini
19. októbra 2016
HTML a CSS cupcake slider s postrekovačmi!
Vyrobil Jamie Coulter
Vyrobil Dudley Storey
Vyrobil mario s maselli
12. októbra 2016
Skúmanie animácie používateľského rozhrania č. 2 s HTML, CSS a JavaScript.
Vyrobil mario s maselli
22. septembra 2016
Skúmanie animácie používateľského rozhrania #3 s HTML, CSS a JavaScript.
Vyrobil mario s maselli
22. septembra 2016
Elektronický obchod Slider v2.0 s HTML, CSS a JavaScript.
Vyrobil Pedro Castro
17. septembra 2016
HTML, CSS a JavaScript čistý posuvník so zakriveným pozadím.
Vyrobil Ruslan Pivovarov
13. septembra 2016
Skúmanie animácie používateľského rozhrania #1 s HTML, CSS a JavaScript.
Vyrobil mario s maselli
8. septembra 2016
Kliknite na Power CSS: Nahor a nadol každý stredný obrázok a stránkovaný posúvač s lightboxom.
Vyrobil Kseso
15. august 2016
Dvojitá expozícia je fotografická technika, ktorá kombinuje 2 rôzne snímky do jednej snímky.
Výrobca Misaki Nakano
Vyrobil Ege Görgülü
Posúvač využívajúci klip vlastností CSS3.
Vyrobil Pedro Castro
1. mája 2016
Responzívny posúvač CSS.
Vyrobil geekwen
19. apríla 2016
Toto je jednoduchý posuvný experiment zobrazujúci slová s krásnym významom, ktoré sa nedajú priamo preložiť. Zameranie: elegantná typografia a jednoduché, ale lákavé prechody.
Vyrobil Joe Harry
5. apríla 2016
Myšlienkou animácie je zmeniť hodnotu cesty klipu CSS, čím sa vytvorí efekt maskovania.
Vyrobil Bhakti Al Akbar
31. marca 2016
Dot slider s HTML, CSS a JavaScript.
Vyrobil Derek Nguyen
16. marca 2016
Posuvník efektu hranola s HTML, CSS a JavaScript.
Vyrobil Victor
12. marca 2016
Posuvná galéria pozadia s HTML, CSS a JavaScript.
Vyrobil Ron Gierlach
30. novembra 2015
Riešenie posuvníkov HTML, CSS a JavaScript.
Vyrobil Jürgen Genser
30. septembra 2015
Produktový posúvač založený na Sequence.js. Sequence.js – responzívny animačný rámec CSS na vytváranie jedinečných posúvačov, prezentácií, bannerov a ďalších aplikácií založených na krokoch.
Vyrobil Ian Lunn
15. september 2015
Malý kruh prispôsobený posúvač.
Vyrobil Bram de Haan
11. august 2015
Responzívny posúvač GTA V s HTML, CSS a JavaScript.
Vyrobil Eduard Mayer
24. januára 2014
Je to ako posúvač, ale z neznámych dôvodov sa otáča kockovo.
Vyrobil Eric Brewer
4. decembra 2013
Vyrobil Hugo DarbyBrown
28. augusta 2013
Jednoduché posúvače
Posuvník prekrývania obrázkov s HTML, CSS a vanilkovým JavaScriptom.
Vyrobené spoločnosťou Yugam
7. júna 2017
Posuvník obrázkov s podporou HTML a CSS.
Vyrobil Joshua Hibbert
16. júna 2016
Viacosový posúvač obrazu
Viacosový posúvač obrázkov s HTML, CSS a JavaScript.
Vyrobil Burak Can
22. júla 2013
Kocka slider, ako aj malý experiment s HTML5/CSS3 3D transformáciami.
Vyrobil Ilya K.
26. júna 2013
Držím ťa na svojej strane. Dnes v CSS majú nové selektory schopnosť ovládať posuvník bez skriptov. Takže, ukážem vám, ako vytvoriť responzívny posúvač v css3?
Plán lekcie
No a dnes vám ukážem, ako si vytvoriť svoj vlastný slider bez skriptov, prispôsobiť ho akémukoľvek zariadeniu a jednoducho ho kedykoľvek zmeniť na nový vzhľad, ako aj pridať nové snímky. Vytvorili sme celkovo 3 snímky, ktoré sa budú posúvať manuálne pri stlačení tlačidiel. Nuž, začnime!
Rozloženie posúvača
Najprv musíme pochopiť, aké bude označenie. Na tomto screenshote môžete vidieť môj príklad označovania, ktorý dnes používam.
Duplikujem to aj s kódom, aby ste si mohli skopírovať a prilepiť svoj vlastný.
Najprv musíme vytvoriť prepínacie tlačidlá. K dispozícii budú tri fragmenty snímky, toľko tlačidiel, koľko je potrebné:
Pokožka stiahne svoj jedinečný identifikátor a o jeden je postarané.
Zostávajúci kus kódu, ktorý potrebujeme. Nie je možné zobraziť titulky pred tlačidlami, ale naozaj ich používame na to, aby sme pridali štandardné tlačidlá (prepínače nie sú štylizované pomocou štýlov) a namiesto nich umiestnime bloky podpisov, ktoré je možné formátovať. Samotné slúžia ako prepínacie tlačidlá a spojenie s prepínačmi sa vykonáva pomocou špeciálneho atribútu for.
A teraz je potrebné celý tento kód zabaliť do jedného skrytého kontajnera. Nech je to blok s triedou zábalu.
Začnime skladať posúvač – štýly klasov na stranu
Na začiatok teda vložíme niekoľko ďalších štýlov, ktoré vám pomôžu odstrániť všetky kroky dokončovania, a potom pracovať tak, aby vnútorné otvory a rámy zodpovedali šírke prvkov. Skúste to takto:
* {
okraj: 0;
výplň: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
Pred slovom * znamená všetky selektory. Toto je taký univerzálny a globálny selektor.
Pripravujeme nádobu. Samotný blok, ktorý obsahuje všetky 3 naše dôležité časti – tlačidlá, snímky a podpisy.
Obal (
výška: 350px;
okraj: 0 auto;
poloha: relatívna;
šírka: 600px;
}
Môžete nastaviť šírku a výšku BE Záleží na tom, akú veľkosť budú mať vaše fotografie na diapozitívy. Neskôr som fotografie orezal na rozmery 600 x 350 pixelov a dal im tieto rozmery. Okraj: 0 automaticky zarovná kontajner na stred stránky a toto umiestnenie vám umožní neskôr presne umiestniť tlačidlá do samotného kontajnera.
Navrhovanie posúvača a sklíčok
Na začiatku sú tieto štýly:
Posúvač (
farba pozadia: #999;
výška: zdediť;
prepad: skrytý;
poloha: relatívna;
šírka: zdediť;
}
Nechajte posúvač mať rovnakú šírku a výšku ako nádoba. Naznačená je aj farba a umiestnenie a sila pretečenia: skryté odreže všetko, čo sa nezmestí do bloku.
Pomocou pravej nohy navrhnite samotné sklíčka:
Snímky (
výška: zdediť;
nepriehľadnosť: 0;
pozícia: absolútna;
šírka: zdediť;
z-index: 0;
}
.auto1 ( obrázok na pozadí: url(bmw.jpg); )
.auto2 ( obrázok na pozadí: url(audi.jpg); )
.auto3 ( obrázok na pozadí: url(porshe.jpg); )
Uvedená je aj šírka a výška sklíčka. Hodnota dedičstva umožňuje, aby hodnota Otcovho bloku klesala. Pomocou síl z-indexu a nepriehľadnosti robíme naše obrázky neviditeľnými. Nižšie jasne popíšeme obrázky na pozadí.
Zatiaľ nepotrebujeme nič, iba sivé pozadie, preto sú naše obrázky uprednostňované.
Navrhovanie remixových tlačidiel
Teraz musíte pridať štandardné prepínače a nahradiť ich štylizovanými podpismi.
Zalomiť > vstup (
displej: žiadny;
}
Odoberáme prepínače.
Zabaliť .control (
pozícia: absolútna;
ľavý okraj: -50px;
vľavo: 50 %;
}
Na pomoc s týmito štýlmi je blok s tlačidlami vycentrovaný.
Zabaliť štítok (
kurzor: ukazovateľ;
displej: inline-block;
výška: 25px;
okraj: 10px;
poloha: relatívna;
šírka: 25px;
orámovanie: 2px plná sivá;
border-radius: 30%/10px;
}
Tieto štýly sú dokonca dôležité aj vpravo, umožňujú nám navrhnúť tlačidlá. Musíte nastaviť veľkosť tlačidiel, nastaviť pre ne typ bloku-riadok a pridať rám. Môžete pridať aj zaoblené hrany.
Teraz máme tri tlačidlá v strede pod snímkami, nielen sivé rámy. Nastavíme to tak, že keď kliknete na tlačidlo, zobrazí sa obrázok, ktorý označuje, že tlačidlo je momentálne aktívne. Predtým, ako prehovorím, ukážem rovnakú techniku v tomto článku iba so začiarkavacími políčkami.
Keďže s vami miešame obrázky áut, poznám ikonu kerma na okraji, mením ich na rozmery približne 20 x 20. Teraz vpravo malý - pridajte obrázok na pozadí tlačidlá, na ktoré sa kliklo.
#point1:checked ~ .control label:nth-of-type(1),
#point2:checked ~ .control label:nth-of-type(2),
#point3:checked ~ .control label:nth-of-type(3) (
pozadie: url(wheel.png) bez opakovania 50 % 50 %;
}
Pokúste sa získať pomoc od takýchto selektorov. Prečo sa trápiť so smradom? V podstate ide o skladací volič, je v ňom zapísaná celá myseľ. Cena je podobná programovaniu. To znamená teraz: ak je vybratý prepínač, musíte nastaviť štýl na podpis, ktorý nájdete nižšie. Teraz, keď stlačíte tlačidlá, uprostred nich sa objaví kerma obraz!
Najdôležitejšou fázou je nácvik miešania!
V skutočnosti sme prehrali všetky tri ruble. A urobte to sami, aby sa namiesto šedej plochy v posúvači objavili obrázky áut, ktoré úspešne vyhoreli. Na tento účel je potrebné vytvoriť ešte jeden skladací volič:
#point1:checked ~ .slider > .auto1,
#point2:checked ~ .slider > .auto2,
#point3:checked ~ .slider > .auto3 (
nepriehľadnosť: 1;
z-index: 1;
}
Čo sa očakáva? Len čo si vysúvačku vyskúšate doma, stane sa z vás robotik. Tieto selektory indikujú nasledovné: ak sa stlačí prepínač, zobrazí sa požadovaná snímka, ktorá sa nachádza tu v html kóde (za prepínačmi).
Týmto spôsobom, keď klikneme na prvé tlačidlo, zobrazí sa nám auto BMW, keď klikneme na ďalšie Audi, keď klikneme na tretie Porshe. A počas celej hodiny, keď je mikrofón zapnutý, sa v tlačidle zobrazuje ikona kerma, posúvač podľa toho, ktorý je aktívny.
No urobili sme posúvač. Stratili ste prispôsobivosť.
Posuvník je prispôsobiteľný na prezeranie na mobilných zariadeniach
Náš posúvač má zatiaľ pevnú šírku 600 pixelov. Problémy sa zrejme začínajú objavovať na obrazovkách menších ako je táto šírka. Zokrema, objaví sa horizontálne samoľúby rolovanie. Aby sme tomu zabránili, musíme kód odoslať po jeho napísaní. Čo je potrebné zmeniť:
- Pre obalový blok, ktorý je kontajnerom hlavy, nenastavujte šírku, ale maximálnu šírku: 600 pixelov. Nechajte nádobu zmenšiť, aby sa veko zmenšilo.
- Posuvník musí byť nastavený na šírku: 100 %;
- Na snímkach sa nedá nič zmeniť.
Túto zmenu nájdete v tomto kóde:
Obal(
max-width: 600px;
}
.posuvník(
šírka: 100 %;
}
Je zrejmé, že teraz je potrebné zaregistrovať niekoľko mediálnych dopytov, aby sa posuvník plne prispôsobil, ako aj prispôsobenie obrázkov novým obrazovkám. V rámci experimentu som si uvedomil, že snímka sa začína nezmestí na obrazovku za šírkou okna približne 600 pixelov. To znamená, že v tomto bode je potrebné urobiť zmenu v štýloch. Pre koho napíšeme prvý mediálny dotaz.
Pred prejavom som napísal správu o médiách a ich stagnácii písaním do tohto článku. Raju sa od nej dozvie, že o adaptívnom dizajne nemá veľa čo povedať.
Samozrejme, aby všetko vyzeralo dobre pri šírke 650 pixelov alebo menej, urobím túto zmenu štýlu:
@media obrazovka a (maximálna šírka: 650px)(
.obal(
max-width: 480px;
výška: 280px;
}
.slides(
veľkosť pozadia: obal;
}
}
Zmení sa šírka posúvača a zmení sa aj výška. Pri samotných diapozitívoch sme si zapísali silu na zmenšenie obrázkov tak, aby sa ich proporcie zmestili do posúvača bez orezania.
Samozrejme, teraz môžete skontrolovať, že ak je šírka menšia ako 650 pixelov, posúvač sa transformuje a vyzerá dobre bez orezania obrázka.
Zvyšný bod je široký približne 400 pixelov. Náš obrázok sa naň opäť nezmestí a treba ho zadať. Za týmto účelom napíšem ďalší mediálny dotaz:
@media obrazovka a (maximálna šírka: 400px)(
.obal(
max-width: 320px;
výška: 180px;
}
.slides(
veľkosť pozadia: obal;
}
}
Všetko to isté, len znova zmeňte šírku a výšku nádoby. Je skvelé, že náš posúvač je teraz úplne prispôsobivý! Publikovanie na mobil so šírkou 320 pixelov vyzerá úžasne. Medzitým sa sami seba čudujte:
Vstupy médií do obrázkov sa vždy proporcionálne menia, pričom sa zachovávajú proporcie.
Efekty je možné pridať do posúvača za hodinu prechodov
No a bonus s touto štatistikou môžete získať množstvo efektov, ktoré je možné implementovať pri prejdení kurzorom nad bloky. Jediné, čo musíte urobiť, je vybrať jeden z nich a priradiť ho k snímkam (. snímky), a keď sa objaví obrázok, vyberte tento efekt. Ak chcete dosiahnuť lepšie výsledky, musíte jasne nastaviť snímky tak, aby mali silu prechodu, aby boli prechody plynulé. Efekt na zadok:
Snímky(
transformácia: rotácia (50 stupňov);
prechod: 1s;
}
Teraz všetko, čo musíte urobiť, aby selektor zviditeľnil snímku, je zadať súvisiacu transformáciu:
#point1:checked ~ .slider > .auto1(
transformovať: žiadny;
}
Urobte to pre všetky snímky. Prvý obrázok bude zrejme otočený a bude neviditeľný a keď sa objaví, dostaví sa efekt plynulého otáčania. Uzavretá poloha. Zdá sa, že môžete predvídať svoje účinky. No, rozdrvili sme posúvač, to je zatiaľ všetko. Keďže máte jedlo, kontrolujem v komentároch.
Doplnenie – ako to urobiť, aby sa po kliknutí na snímku presunula na správu priradenú k snímke?
Inými slovami, máme len obrázky, ale ako na ne môžeme kliknúť? Na tento účel už máte pripravený posúvač z tejto lekcie. Ďalej musíte poznať obsah html kódu, ktorý predstavuje samotné snímky. Os na snímke obrazovky:
Ako viete, stred prvého a druhého som vložil do sklíčka. Tiež, keď kliknete na prvú snímku, prejdete na Google, keď kliknete na druhú, prejdete na Yandex. Chcel by som upozorniť, že správa sa otvorí vo vašom okne, takže presná strana s posuvníkom je iná. Ak potrebujete otvoriť správy zo snímok v novom okne, pri značke vzhľadu Musíte pridať atribút target = "_blank".
Ale to nie je všetko, čo sa dá zarobiť! Infekcia nerobí nič, aby bolo možné kliknúť na obrázky, musíte na os CSS pridať nasledujúce:
Snímky a(
displej: blok;
šírka: 100 %;
výška: 100 %;
}
Potom musíte pre všetky snímky odoslať prvok bloku a určiť jeho šírku a výšku ako 100 %, aby zaberal celý priestor obrázka. Teraz všetko funguje dobre, môžete to skontrolovať. Stačí nahradiť adresy v správach a môžete rýchlo začať. Dúfam, že to vysvetlím čo najjasnejšie.
Kúsok tvojej úcty: Všetci chceme hostiť naše webové stránky na spoľahlivom hostingu. Analyzoval som stovky hostingových stránok a poznám ten najlepší - HostIQ Merezha má stovky pozitívne vibrácie o ňom je priemerné hodnotenie koristuvachov 4,8 z 5. Nech sú vaše stránky láskavé.
