U ovom vodiču napravit ćemo izvrstan CSS3 klizač. Koristit će efekt blijeđenja između slajdova. Osim toga, možete koristiti opis za svaku sliku. Za organizaciju informacija koristit će se neuređeni popis. Slajdovi će se automatski mijenjati pomoću CSS3 animacija.

HTML označavanje

HTML oznaka je vrlo jednostavna. Primjer ima četiri slajda. Svaki od njih sastoji se od slike (kao pozadine) i opisa teksta div element. Vrlo je jednostavno umetnuti dodatne slajdove.

CSS

Klizač koristi CSS3 animacije anim_slides i anim_titles. Prvi se koristi za pojedinačne slajdove, drugi za tekst opisa. Položaj i prozirnost također se mijenjaju za opis.

/* Klizač */ .slides ( height:300px; margin:50px auto; overflow:hidden; position:relative; width:900px; ) .slides ul ( list-style:none; position:relative; ) /* Okviri animacije # anim_slides */ @-webkit-keyframes anim_slides ( 0% (opacity:0; ) 6% (opacity:1; ) 24% (opacity:1; ) 30% (opacity:0; ) 100% (opacity:0; ) ) @-moz-keyframes anim_slides ( 0% (opacity:0; ) 6% (opacity:1; ) 24% (opacity:1; ) 30% (opacity:0; ) 100% (opacity:0; ) ) . slajdovi ul li (opacity:0; position:absolute; top:0; /* css3 animacija */ -webkit-animation-name: anim_slides; -webkit-animation-duration: 24.0s; -webkit-animation-timing-function: linearno; -webkit-animation-count-iteration: beskonačno; -webkit-animation-direction: normalno; -webkit-animation-delay: 0; -webkit-animation-play-state: izvodi se; -webkit-animation-fill-mode : naprijed; -moz-naziv-animacije: anim_slides; -moz-trajanje-animacije: 24,0 s; -moz-animation-timing-function: linearno; -moz-animation-broj ponavljanja: beskonačno; -moz-animation-direction: normalno; -moz-animation-delay: 0; -moz-animation-play-state: trčanje; -moz-animation-fill-mode: naprijed; ) /* css3 kašnjenja */ .slides ul li:nth-child(2), .slides ul li:nth-child(2) div ( -webkit-animation-delay: 6,0 s; -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; ) . slajdovi 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; ) /* Okviri animacije #anim_titles */ @-webkit-keyframes anim_titles ( 0% ( lijevo:100%; neprozirnost:0; ) 5% ( lijevo:10%; neprozirnost:1; ) 20% ( lijevo:10%; neprozirnost:1; ) 25% ( lijevo:100%; neprozirnost:0; ) 100% ( lijevo:100%; neprozirnost:0; ) ) @-moz-keyframes anim_titles ( 0% ( lijevo:100 %; neprozirnost:0; ) 5% ( lijevo:10%; neprozirnost:1; ) 20% ( lijevo:10%; neprozirnost:1; ) 25% ( lijevo:100%; neprozirnost:0; ) 100% ( lijevo :100%; neprozirnost:0; ) ) .slides ul li div ( background-color:#000000; border-radius:10px 10px 10px 10px; box-shadow:0 0 5px #FFFFFF inset; color:#FFFFFF; veličina fonta:26px; lijevo:10%; margina:0 auto; padding:20px; pozicija: apsolutna; vrh:50%; širina:200px; /* Css3 animacija */ -webkit-animation-name: anim_titles; -webkit-animation-duration: 24.0s; -webkit-animation-timing-function: linearno; -webkit-animation-iteration-count: beskonačno; -webkit-animation-direction: normalno; -webkit-animation-delay: 0; -webkit-animation-play-state: izvodi se; -webkit-animation-fill-mode: naprijed; -moz-naziv-animacije: anim_titles; -moz-animacija-trajanje: 24. 0s; -moz-animation-timing-function: linearno; -moz-animation-iteration-count: beskonačno; -moz-animation-direction: normalno; -moz-animation-delay: 0; -moz-animation-play-state: trčanje; -moz-animation-fill-mode: naprijed; )

4. studenog 2019 Post je ažuriran

Jurij Nemets

Čisti CSS klizači + bonus klizač

CSS klizači imaju neke prednosti u odnosu na Javascript klizače. Jedna od tih prednosti je brzina učitavanja. Ne samo da se slike za klizače koriste u velikim veličinama (ako nema optimizacije za različite ekrane), također je potrebno neko vrijeme za učitavanje skripti. Ali u članku ćete vidjeti samo klizače koji koriste čisti CSS.

Evo što sam pronašao na web stranici o klizačima:

1. CSS3 klizač slike

CSS klizač koji koristi radio gumbe za navigaciju slajdovima. Ovi radio gumbi nalaze se ispod klizača. Također, osim radio gumba, navigacija se vrši pomoću strelica lijevo i desno. Da bi se pratilo koja je slika trenutno prikazana, koriste se pseudoklase :checked.

2. CSS3 klizač slike sa sličicama

Za razliku od prethodnog CSS klizača, ovdje se umjesto radio gumba na dnu nalaze sličice svih slika, što je također zgodno prilikom izrade galerije slika. Slike se mijenjaju s neobičnim učinkom: glatko nestaju kada se povećaju.

3. Galerija sa CSS-om

Ali ovaj CSS klizač savršen je za prodajne stranice. U pravilu, prilikom izrade landing stranica (prodajnih stranica), mnogi web developeri postavljaju klizač na sam početak, tako da na prvom ekranu (bez skrolanja) posjetitelj odmah vidi sve pogodnosti koje su mu dostupne na ovoj stranici. Osim svega, ovaj slajder je prilagodljiv, što je također lijepo.

4. CSS klizač bez poveznica

Želio bih odmah napomenuti da ovaj klizač ne koristi veze! Prema zadanim postavkama, uz glavnu sliku (slajd), vidljiva su još 2 slajda. Nalaze se iza glavnog. Mijenjanje slajdova odvija se u prekrasnom načinu: prvo se dva slajda razmaknu, a slajd koji će tada postati glavni postaje centriran. Slajd se zatim poveća i postavi ispred ostalih.

5. Responzivni CSS3 klizač

Još adaptivni klizač, čija se kontrola temelji na radio gumbima. Da vidim kako će ovaj klizač izgledati dalje različite uređaje ah - Možete sami promijeniti prozor preglednika ili na stranici s klizačem postoje posebne ikone za različite uređaje, klikom na koje ćete vidjeti kako će klizač izgledati na računalu, tabletu ili pametnom telefonu.

***BONUS SLIDER***

Uz sve gore navedene klizače, želim vas zadovoljiti s još jednim. Ovaj klizač savršen je za stvaranje galerije slika. Ne možete riječima objasniti čime se bavi, stoga je bolje da sve pogledate u videu:

Zaključak

Pomoću klizača možete lijepo dizajnirati galerije slika, postavljajući ih kompaktnije, umetnite klizač na prvi zaslon (dio stranice koji je vidljiv bez pomicanja) prodajne stranice kako biste posjetitelju odmah pokazali glavne prednosti koje će dobiti . Još uvijek možete pronaći mnogo načina gdje i kako možete koristiti klizače, ali jedno je jasno - korisni su kada se pravilno koriste.

Točke o kojima se raspravljalo u članku.

Zbirka besplatnih HTML i CSS klizač primjeri koda: kartica, usporedba, cijeli zaslon, responzivno, jednostavno itd. Ažuriranje kolekcije za lipanj 2018. 7 novih stavki.

Sadržaj

povezani članci

O šifri

Skup početnih zaslona u HTML/CSS/JS. Osobni eksperiment s slojevitim PNG ikonama, CSS3 prijelazima i flexboxom.

HTML, CSS i JavaScript klizač kartice s informacijama.
Napravio Andy Tran
23. studenog 2015

Klizač za fotografije radi na stolnim i mobilnim preglednicima.
Izradio Taron
29. rujna 2014

Klizači za usporedbu (prije/poslije).

O šifri

Jednostavan i čist klizač za usporedbu slika, potpuno osjetljiv i spreman za dodir s CSS-om i jQueryjem.

O šifri

Klizač prije i poslije sa samo html i css.

O šifri

Igram se s novom idejom koristeći moj dvoslojni klizač slike prije/poslije. Održavajući ga minimalnim. Održavanje vanilije. Lajkajte ako je korisno :)

Vanilla JS, minimalno, lijepo izgleda.
Izradio Huw
3. srpnja 2017

O šifri

Element klizača "split-screen" s JavaScriptom.

Mali eksperiment za klizač prije i poslije sve unutar SVG-a. Maskiranje to čini prilično jednostavnim. Budući da je sve u SVG formatu, slike i opisi se lijepo slažu. GreenSock-ovi dodaci Draggable i ThrowProps korišteni su za kontrolu klizača.
Napravio Craig Roblewsky
17. travnja 2017

Koristi prilagođeni unos raspona za klizač.
Izradio Dudley Storey
14. listopada 2016

Responzivni klizač za usporedbu slika s HTML-om, CSS-om i JavaScriptom.
Izradio Ege Görgülü
3. kolovoza 2016

Klizač za usporedbu HTML5, CSS3 i JavaScript videozapisa prije i poslije.
Izradio Dudley Storey
24. travnja 2016

Zgodan klizač koji se može povlačiti za brzu usporedbu 2 slike, pokretan CSS3 i jQueryjem.
Izradio CodyHouse
15. rujna 2014

Klizači za cijeli zaslon

O šifri

Jednostavan klizač temeljen na radijskim ulazima. 100% čisti HTML + CSS. Radi i sa tipkama sa strelicama.

Odgovarajući: da

Ovisnosti: -

O šifri

Dobar efekt prijelaza za klizač preko cijelog zaslona.

O šifri

Klizni klizač za vodoravnu paralaksu sa Swiper.js.

O šifri

Prilagodljivi glatki klizač 3D perspektive na pomicanje miša.

Klizač herojske slike na cijelom zaslonu (tema povlačenja ploča) s HTML-om, CSS-om i JavaScriptom.
Izradio Tobias Bogliolo
25. lipnja 2017

Interakcija klizača koja koristi Velocity i Velocity efekte (UI Pack) za poboljšanje animacije. Animacija se pokreće pomoću tipki sa strelicama, navigacijskim klikom ili tipkom za pomicanje. Ova verzija uključuje granice kao dio interakcije.
Izradio Stephen Scaff
11. svibnja 2017

Jednostavan klizač u minimalističkom stilu za prikazivanje slika. Dio slike iskoči na svakom slajdu.
Izradio Nathan Taylor
22. siječnja 2017

Stvar je prilično lako prilagodljiva. Možete sigurno promijeniti font, veličinu fonta, boju fonta, brzinu animacije. Prvo slovo novog niza u nizu u JS-u pojavit će se na novom slajdu. Lako stvoriti (ili izbrisati) novi slajd: 1. Dodajte novi grad u polje u JS-u. 2. Promijenite varijablu broja slajdova i stavite novu sliku na scss popis u CSS-u.
Napravio Ruslan Pivovarov
8. listopada 2016

1. Clip-path za obrub pravokutnika za maskiranje slike (samo webkit).
2. Način miješanja za ovu masku.
3. Pametan sustav boja, samo stavite svoje ime boje i vrijednost u sass mapu i zatim dodajte odgovarajuću klasu s tim nazivom boje elementima i sve će raditi!
4. Bočni izbornik Cool kredita (kliknite mali gumb u sredini demonstracije).
5. Vanilija js sa samo< 200 lines of code (basically it’s just adds/removes classes).

Napravio Nikolay Talanov
7. listopada 2016

Ovaj nakošeni klizač s pomicanjem temeljen na čistom JS-u i CSS-u (bez biblioteka).
Izradio Victor Belozyorov
3. rujna 2016

Klizna animacija s Pokemon dizajnom.
Izradio Pham Mikun
18. kolovoza 2016

HTML, CSS i JavaScritp klizač sa složenom animacijom i poluobojenim tekstom pod kutom.
Napravio Ruslan Pivovarov
13. srpnja 2016

Efekt paralakse klizača s HTML-om, CSS-om i JavaScriptom.
Izradio Manuel Madeira
28. lipnja 2016

HTML, CSS i JavaScript klizač s efektom mreškanja.
Napravio Pedro Castro
21. svibnja 2016

Clip-Path otkriva klizač s HTML-om, CSS-om i JavaScriptom.
Napravio Nikolay Talanov
16. svibnja 2016

GSAP + Slick klizač s pregledom prethodnih/sljedećih slajdova.
Izradio Karlo Videk
27. travnja 2016

HTML, CSS i JavaScript klizač cijele stranice.
Izradio Joseph Martucci
28. veljače 2016

Potpuni klizni prototip s HTML-om, CSS-om i JavaScriptom.
Izradio Gluber Sampaio
6. siječnja 2016

Prezentacija preko cijelog zaslona, ​​na neki način responzivna, animirana pomoću Greensocks TweenLite/Tweenmax.
Izradio Arden
12. prosinca 2015

Izradio Arden
5. prosinca 2015

Klizač preko cijelog zaslona (GSAP Timeline) broj 1 s HTML-om, CSS-om i JavaScriptom.
Izradio Diaco M.Lotfollahi
23. studenog 2015

HTML i CSS klizač s prilagođenim efektima.
Napravio Nikolay Talanov
12. studenog 2015

Povucite klizač preko cijelog zaslona s paralaksom s HTML-om, CSS-om i JavaScriptom.
Napravio Nikolay Talanov
12. studenog 2015

Dokaz koncepta rotirajući klizač. Koristi isječak i puno matematike.
Napravio Tyler Johnson
16. travnja 2015

Jednostavan CSS & jQuery klizač preko cijelog zaslona koji koristi translateX i translate3d glatkoću!
Izradio Josip
19. kolovoza 2014

Responzivni klizači

O šifri

Klizač neprozirnosti slika

Klizač neprozirnosti slika u HTML-u i CSS-u.

Kompatibilni preglednici: Chrome, Edge, Firefox, Opera, Safari

Odgovarajući: da

Ovisnosti: -

O šifri

Složeni fleksibilni raspored slajdova

Ovaj primjer ilustrira kako stvoriti raspored slajdova naslaganih jedan na drugom (posebno korisno za prijelaze izbljeđivanja/ispadanja). To se postiže bez postavljanja njihove visine i izbjegavanja položaja: apsolutni; tako da su potpuno fleksibilni i lako ih je držati u normalnom tijeku stranice.

Kompatibilni preglednici: Chrome, Edge, Firefox, Opera, Safari

Odgovarajući: da

Ovisnosti: -

O šifri

Responzivni klizač

Animirani responzivni klizač u HTML-u, CSS-u i JavaScriptu.

Kompatibilni preglednici: Chrome, Edge, Firefox, Opera, Safari

Odgovarajući: da

Ovisnosti: animate.css

O šifri

Klizač s maskiranim tekstom

Klizač samo za CSS s maskiranim tekstom.

Kompatibilni preglednici: Chrome, Edge (djelomično), Firefox, Opera, Safari

Odgovarajući: da

Ovisnosti: -

O šifri

Slika i sadržaj s efektom paralakse.

O šifri

Galerija slajdova samo za CSS.

Kompatibilni preglednici: Chrome, Edge, Firefox, Opera, Safari

Odgovarajući: da

Ovisnosti: -

O šifri

Čisti HTML/CSS klizač

Čisti HTML/CSS klizač s kružnom SVG trakom napretka.

Kompatibilni preglednici: Chrome, Edge (djelomično), Firefox (djelomično), Opera, Safari

Odgovarajući: da

Ovisnosti: font-awesome.css

O šifri

Eksperiment za stvaranje potpuno responzivnog okomitog klizača sa sličicama koristeći samo CSS i zadržavajući omjer slike.

O šifri

Jednostavan Flexbox klizač/vrtuljak za slike izrađen pomoću vanilla JavaScripta.

O šifri

Ovo je eksperiment koji simulira efekt zamućenja pri pokretu svaki put kad se promijeni slajd. Iskorištava prednosti SVG Gaussovog filtra zamućenja i neke CSS animacije ključnih kadrova. Iako učinak ne zahtijeva Javascript za ispravan rad, u ovom primjeru Javascript se koristi samo za funkcionalnost klizača.

O šifri

Cool animira klizač s JS-om.

O šifri

Ovo je eksperiment o tome kako nam SVG uzorci mogu pomoći u stvaranju maskiranih slika za klizač slike samo za CSS.

Istraživanje nekih prijelaza klizača. Klizač s uključenom opcijom paralakse. Ovdje se uglavnom igrate s CSS filterima.
Izradio Mirko Zorić
12. lipnja 2017

Jednostavan GSAP klizač s nekoliko suptilnih između animacija.
Izradio Goran Vrban
9. lipnja 2017

Sučelje klizača s HTML-om, CSS-om i JavaScriptom.
Izradio Mergim Ujkani
6. lipnja 2017

Slider GSAP verzija 2.
Izradio Em An
4. svibnja 2017

Mali slatki prijelazni klizač koji koristi jednostavan dogovor za klasu dodavanja. Moramo malo izgladiti vremena i odlučiti se za najbolji pristup za mobitel(samo slagajte, dodajte dodirne događaje, učinite slike punim okvirom za prikaz, itd. Podržava kotačić za pomicanje (pomicanje), gumbe za navigaciju i tipke sa strelicama. Također se može povećati omotač sadržaja kako bi slike ispunile okvir za prikaz u svom neanimiranom stanju, što je nekako cool također.
Izradio Stephen Scaff
3. siječnja 2017

Poluga CSS rubna slika& clip-path za stvaranje efekta animacije klizača.
Izradila Emily Hayman
31. prosinca 2016

Mali klizač izrađen od flexboxa. Donekle osjetljiv i može imati fiksne elemente uz područje klizača.
Izradio Robert
28. studenog 2016

HTML, CSS klizač platna.
Izradio Nvagelis
29. listopada 2016

HTML, CSS i JavaScript 3D glatki klizač.
Izradio Eduardo Allegrini
19. listopada 2016

HTML i CSS cupcake slajder s prskalicama!
Izradio Jamie Coulter
14. listopada 2016

Izradio mario s maselli
12. listopada 2016

Istraživanje UI animacije #2 s HTML-om, CSS-om i JavaScriptom.
Izradio mario s maselli
22. rujna 2016

Istraživanje UI animacije #3 s HTML-om, CSS-om i JavaScriptom.
Izradio mario s maselli
22. rujna 2016

Ecommerce Slider v2.0 s HTML-om, CSS-om i JavaScriptom.
Napravio Pedro Castro
17. rujna 2016

HTML, CSS i JavaScript čisti klizač sa zakrivljenom pozadinom.
Napravio Ruslan Pivovarov
13. rujna 2016

Istraživanje UI animacije br. 1 s HTML-om, CSS-om i JavaScriptom.
Izradio mario s maselli
8. rujna 2016

Uživajte u snazi ​​CSS-a: gore i dolje svaka srednja slika i klizač s stranicama s okvirom za pregled.
Izradio Kseso
15. kolovoza 2016

Dvostruka ekspozicija je fotografska tehnika koja kombinira 2 različite slike u jednu sliku.
Izradio Misaki Nakano
3. kolovoza 2016

Klizač pomoću isječka svojstava CSS3.
Napravio Pedro Castro
1. svibnja 2016

Responzivni CSS klizač.
Izradio geekwen
19. travnja 2016

Ovo je jednostavan eksperiment klizača koji prikazuje riječi s prekrasnim značenjima koja se ne mogu izravno prevesti. Fokus: elegantna tipografija i jednostavni, ali primamljivi prijelazi.
Napravio Joe Harry
5. travnja 2016

Ideja animacije je promijeniti vrijednost putanje CSS isječka, čime se postiže efekt maskiranja.
Izradio Bhakti Al Akbar
31. ožujka 2016

Točkasti klizač s HTML-om, CSS-om i JavaScriptom.
Napravio Derek Nguyen
16. ožujka 2016

Klizač s efektom prizme s HTML-om, CSS-om i JavaScriptom.
Izradio victor
12. ožujka 2016

Klizna pozadinska galerija s HTML-om, CSS-om i JavaScriptom.
Izradio Ron Gierlach
30. studenog 2015

HTML, CSS i JavaScript klizno rješenje.
Izradio Jürgen Genser
30. rujna 2015

Klizač proizvoda koji pokreće Sequence.js. Sequence.js - responzivni CSS animacijski okvir za stvaranje jedinstvenih klizača, prezentacija, bannera i drugih aplikacija temeljenih na koracima.
Napravio Ian Lunn
15. rujna 2015

Mali krug prilagođeni klizač.
Napravio Bram de Haan
11. kolovoza 2015

Responzivni GTA V klizač s HTML-om, CSS-om i JavaScriptom.
Izradio Eduard Mayer
24. siječnja 2014

To je poput klizača, ali se okreće kockasto iz nepoznatih razloga.
Izradio Eric Brewer
4. prosinca 2013

Izradio Hugo DarbyBrown
28. kolovoza 2013

Jednostavni klizači

Klizač za preklapanje slika s HTML-om, CSS-om i vanilin JavaScriptom.
Izradio Yugam
7. lipnja 2017

HTML i CSS istaknuti klizač slike.
Napravio Joshua Hibbert
16. lipnja 2016

Višeosni klizač slike

Višeosni klizač slike s HTML-om, CSS-om i JavaScriptom.
Napravio Burak Can
22. srpnja 2013

Cube slider, mali eksperiment s HTML5/CSS3 3d transformacijama.
Izradio Ilya K.
26. lipnja 2013

Dobrodošli ponovno na moj blog. Danas je u CSS-u, zahvaljujući novim selektorima, moguće kreirati klizač bez skripti. Pa ću vam u ovom članku pokazati kako napraviti responzivni klizač u css3?

Plan učenja

Dakle, danas ću vam vrlo detaljno pokazati kako izraditi vlastiti slajder bez skripti, prilagoditi ga bilo kojem uređaju i jednostavno promijeniti njegov izgled u budućnosti, kao i dodati nove slajdove. Napravit ćemo samo 3 slajda, koji će se mijenjati ručno kada kliknete na gumbe. Pa, počnimo!

Izgled klizača

Prije svega, morate razumjeti što će biti oznaka. Na ovoj snimci zaslona možete vidjeti moj primjer označavanja, na čemu ću danas raditi.
Također ću duplicirati sve ovo u kodu tako da možete sami kopirati i zalijepiti.
Prvi korak je stvaranje gumba s kliznim prekidačem. Budući da će postojati tri slajda, potreban je isti broj gumba:

Svatko dobije svoje jedinstveni identifikator, a jedan je odabran prema zadanim postavkama.

Zadnji dio koda koji nam treba. Prikazuje oznake za gumbe, ali zapravo ih koristimo za skrivanje zadanih gumba (radio gumbi nisu stilizirani) i umjesto njih stavljamo ove blokove oznaka koji se mogu stilizirati. Oni će služiti kao gumbi za prebacivanje, a veza s radio gumbima se vrši preko posebnog for atributa.

I sada sav ovaj kod treba zamotati u jedan zajednički spremnik. Neka ovo bude blok s klasom omotanja.

Počnimo stvarati klizač - početne stilove za stranicu

Dakle, za početak, postavit ćemo opće stilove koji će pomoći pri poništavanju svih zadanih ispuna, a u isto vrijeme pobrinuti se da unutarnja ispuna i obrubi budu uzeti u obzir u širini elemenata. To se radi ovako:

* {
margina: 0;
ispuna: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: rubni okvir;
veličina okvira: border-box;
}

Usput, * označava sve selektore. Odnosno takav univerzalni i globalni izbornik.

Slažemo posudu. To je sam blok koji sadrži sva 3 naša važna dijela - gumbe, slajdove i natpise.

omot (
visina: 350px;
margina: 0 auto;
položaj: relativan;
širina: 600px;
}

Možete postaviti širinu i visinu BILO KOJI, ovisno o veličini vaših fotografija za slajdove. Fotografije sam unaprijed izrezao na dimenzije 600 x 350 piksela, zbog čega navodim ove veličine. Margina: 0 automatski će poravnati spremnik točno u sredini stranice, a relativno pozicioniranje će omogućiti da se gumbi kasnije precizno postave unutar samog spremnika.

Dizajn klizača i slajdova

Prvo, evo stilova:

Klizač (
boja pozadine: #999;
visina: naslijediti;
preljev: skriven;
položaj: relativan;
širina: naslijediti;
}

Dajmo klizaču istu širinu i visinu kao i opći spremnik. Također specificiramo boju i pozicioniranje, a svojstvo overflow: hidden odsijeca sve što ne spada u blok.

Sljedeće što trebate učiniti je dizajnirati same slajdove:

Slajdovi (
visina: naslijediti;
neprozirnost: 0;
pozicija: apsolutna;
širina: naslijediti;
z-indeks: 0;
}
.auto1 (pozadinska slika: url(bmw.jpg); )
.auto2 (pozadinska slika: url(audi.jpg); )
.auto3 (pozadinska slika: url(porshe.jpg); )

Također specificiramo širinu i visinu kao za slajd. Vrijednost nasljeđivanja omogućuje vam nasljeđivanje vrijednosti nadređenog bloka. Pomoću svojstava z-index i neprozirnosti učinit ćemo naše slike nevidljivima. U nastavku jasno označavamo pozadinske slike.

Za sada nećemo vidjeti ništa, samo Siva pozadina, jer su naše slike skrivene.

Projektiranje tipki prekidača

Sada moramo ukloniti standardne radio gumbe i umjesto toga stilizirati naslove.

Prelomi > unos (
prikaz: nijedan;
}

Uklanjanje radio gumba.

Prelomi .kontrolu (
pozicija: apsolutna;
margin-lijevo: -50px;
lijevo: 50%;
}

Koristeći ove stilove sredit ćemo blok s gumbima.

Prelomi naljepnicu (
kursor: pokazivač;
prikaz: inline-block;
visina: 25px;
margina: 10px;
položaj: relativan;
širina: 25px;
obrub: 2px jednobojna siva;
rubni radijus: 30%/10px;
}

Ovi stilovi čine vrlo važnu stvar - omogućuju nam stiliziranje gumba. Morate postaviti veličinu gumba, postaviti ih na blok-liniju, uvlake i sivi rub. Također možete dodati zaobljene kutove.

Sada imamo tri gumba centrirana ispod slajdova, samo su sivi rubovi. Pobrinimo se da se, kada kliknete na gumb, u njemu pojavi neka slika koja pokazuje da je gumb aktivan u ovaj trenutak. Usput, u ovom članku prikazujem istu tehniku, samo s potvrdnim okvirima.

Budući da ti i ja mijenjamo slike automobila, pronašao sam ikonu volana na internetu, smanjio je na veličinu otprilike 20 puta 20. Sada je mala stvar dodati pozadinsku sliku gumbu ako se klikne.

#point1:checked ~ .control label:nth-of-type(1),
#point2:checked ~ .control label:nth-of-type(2),
#point3:checked ~ .control label:nth-of-type(3) (
pozadina: url(wheel.png) bez ponavljanja 50% 50%;
}

To se radi pomoću ovakvih selektora. Što oni rade? Zapravo, ovo je složen selektor, u njemu je zapisan cijeli jedan uvjet. Pomalo je poput programiranja. To znači sljedeće: ako je radio gumb odabran, tada trebate primijeniti stil na natpis, koji ide negdje dalje u označavanju. Sada kada kliknete na gumbe, unutar njih se pojavljuje slika volana!

Najvažnija faza je uspjeti prebacivanje!

Zapravo, ostalo nam je još samo malo. Naime, pobrinite se da se umjesto sivog područja u klizaču pojave slike s automobilima po kojima se može uspješno listati. Da biste to učinili, trebate koristiti druge složene selektore:

#point1:checked ~ .slider > .auto1,
#point2:checked ~ .slider > .auto2,
#point3:checked ~ .slider > .auto3 (
neprozirnost: 1;
z-indeks: 1;
}

Što se događa? Sada, ako isprobate klizač u akciji, bit će potpuno funkcionalan. Ovim biračima označavamo sljedeće: ako se pritisne radio gumb, učini vidljivim željeni slajd, koji se nalazi negdje dalje u html kodu (iza radio gumba).

Tako kada kliknemo na prvi gumb prikazuje nam se automobil BMW, kada kliknemo na drugi - Audi, kada kliknemo na treći - Porshe. I sve to vrijeme, prilikom prebacivanja, ikona upravljača pojavljuje se u gumbu za koji je klizač aktivan.

Pa smo napravili klizač. Ostaje samo prilagoditi ga.

Prilagodba klizača za gledanje na mobilnim uređajima

Za sada naš klizač ima fiksnu širinu od 600 piksela. Sukladno tome, problemi će se početi javljati na zaslonima manjim od ove širine. Točnije, pojavit će se vodoravna traka za pomicanje. Da bismo to izbjegli, samo trebamo malo dotjerati već napisani kod. Evo što treba promijeniti:

1. Za blok omotača, to jest glavni spremnik, postavite ne širinu, već maksimalnu širinu: 600px. To će omogućiti da se spremnik smanji kako prozor postaje manji u širini.
2. Klizač treba postaviti na širinu: 100%;
3. Ne mijenjamo ništa za slajdove.

Ukupno se sve promjene mogu vidjeti u ovom kodu:

omot (
max-width: 600px;
}
.klizač(
širina: 100%;
}

Odlično, sada preostaje samo napisati nekoliko medijskih upita kako bi klizač u potpunosti reagirao, kao i skalirati slike kako bi odgovarale novim zaslonima. Eksperimentiranjem sam otkrio da slika dijapozitiva počinje ne stati na zaslon pri širini prozora od približno 600 piksela. To znači da oko ovog područja trebate promijeniti stilove. Da bismo to učinili, napišimo prvi medijski upit.

Usput, u ovom sam članku detaljno pisao o medijskim upitima i njihovoj primjeni. Savjetujem da pročitaju oni koji nemaju pojma o responzivnom dizajnu.

U skladu s tim, kako bi sve bilo dobro prikazano na širini od 650 piksela ili manje, predlažem sljedeću promjenu stila:

@medijski zaslon i (maksimalna širina: 650 px)(
.wrap(
max-width: 480px;
visina: 280px;
}
.slajdovi(
veličina pozadine: naslovnica;
}
}

Širina samog klizača će se smanjiti, a visina će se također smanjiti. Za same slajdove napisali smo svojstvo koje skalira slike tako da one, zadržavajući svoje proporcije, potpuno stanu u klizač bez obrezivanja.

Sjajno, sada možete testirati i uvjeriti se da se klizač transformira i izgleda dobro bez izrezivanja slike kada je širina manja od 650 piksela.

Posljednja točka široka je približno 400 piksela. Na njemu naša slika ponovno počinje ne stati i moramo nešto poduzeti. Da bih to učinio, napisat ću još jedan medijski upit:

@medijski zaslon i (maksimalna širina: 400 px)(
.wrap(
max-width: 320px;
visina: 180px;
}
.slajdovi(
veličina pozadine: naslovnica;
}
}

Sve je isto, samo opet smanjujemo širinu i visinu kontejnera. Sjajno, naš klizač sada u potpunosti reagira! Čak i na mobitel sa širinom od 320 piksela izgledat će sjajno. Ipak, pogledajte sami:

Zahvaljujući medijskim upitima, slike se proporcionalno smanjuju uz zadržavanje svojih proporcija.

Dodavanje efekata prijelaza na klizač

Pa, bonus. U ovom članku možete vidjeti nekoliko efekata koji se mogu implementirati kada lebdite iznad blokova. Dakle, samo odaberite bilo koji od njih i dodijelite ga slajdovima (.slides), a kada se slika pojavi, poništite efekt. Da biste vidjeli rezultat, morate postaviti svojstvo prijelaza na slajdove tako da prijelazi budu glatki. Primjer učinka:

Slajdovi (
transformacija: rotacija (50 stupnjeva);
prijelaz: 1s;
}

Sada je dovoljno da selektor koji čini slajd vidljivim poništi transformaciju:

#point1:provjereno ~ .klizač > .auto1(
transformacija: nijedan;
}

I učinite ovo za sve slajdove. Prema tome, u početku će slika biti rotirana i nevidljiva, a kada se pojavi, pojavit će se učinak glatkog povratka u prvobitni položaj. U skladu s tim, možete smisliti vlastite efekte. Pa, napravili smo klizač, to je sve za mene. Ako imate pitanja, čekam u komentarima.

Dodatak - kako osigurati da kada kliknete na slajd, slijedite poveznicu priloženu slajdu?

Drugim riječima, sada imamo samo slike, ali kako ih možemo učiniti klikabilnim? Da biste to učinili, već biste trebali imati gotov klizač za ovu lekciju. Zatim morate pronaći dio u html kodu koji je odgovoran za same slajdove. Evo ga na snimci zaslona:

Kao što vidite, umetnuo sam poveznice unutar prvog i drugog slajda. Dakle, kada kliknete na prvi slajd, otići ćete na Google, kada kliknete na drugi, otići ćete na Yandex. Napominjem da će se veza otvoriti u istom prozoru, odnosno trenutna stranica s klizačem će u ovom slučaju nestati. Ako trebate otvoriti poveznice sa slajdova u novom prozoru, u svakoj oznaci trebate dodati atribut target = "_blank".

Ali to nije sve što treba učiniti! Trenutačno još ništa ne radi, da bi se slike mogle kliknuti, morate dodati ovo u css:

Slajdovi a(
prikaz: blok;
širina: 100%;
visina: 100%;
}

Odnosno, za sve slajdove vezu činimo blok elementom, a širinu i visinu postavljamo na 100% tako da zauzima cijeli prostor slike. Sada bi sve trebalo raditi, možete provjeriti. Samo zamijenite adrese u vezama i možete je koristiti. Nadam se da sam što jasnije objasnio.

Trenutak vaše pažnje: Svi želimo naše web stranice smjestiti na pouzdan hosting. Analizirao sam stotine hostinga i pronašao najbolje - HostIQ Ima ih na stotine online Pozitivna ocjena o tome, prosječna korisnička ocjena je 4,8 od 5. Neka vaše stranice budu dobre.