Atsaucīgs slīdnis, izmantojot CSS3. Adaptīvo slīdņu izvēle Pārrobežu slīdnis

2019. gada 4. novembris Ziņa ir atjaunināta

Jurijs Nemets

Tīri CSS slīdņi + papildu slīdnis

CSS slīdņiem ir dažas priekšrocības salīdzinājumā ar Javascript slīdņiem. Viena no šīm priekšrocībām ir ielādes ātrums. Slīdņu attēli tiek izmantoti ne tikai lielos izmēros (ja nav optimizācijas dažādiem ekrāniem), bet arī zināms laiks tiek pavadīts skriptu ielādei. Bet rakstā jūs redzēsiet tikai slīdņus, izmantojot tīru CSS.

Lūk, ko es atradu vietnē par slīdņiem:

1. CSS3 attēla slīdnis

CSS slīdnis, kas izmanto radio pogas, lai pārvietotos slaidos. Šīs radio pogas atrodas zem slīdņiem. Turklāt, papildus radio pogām, navigācija tiek veikta, izmantojot bultiņas kreisajā un labajā pusē. Lai izsekotu, kurš attēls pašlaik tiek rādīts, tiek izmantotas :checked pseidoklases.

2. CSS3 attēla slīdnis ar sīktēliem

Atšķirībā no iepriekšējā CSS slīdņa, šeit radio pogu vietā apakšā ir visu attēlu sīktēli, kas ir ērti arī veidojot attēlu galeriju. Attēli mainās ar savdabīgu efektu: tie vienmērīgi pazūd, kad tos palielina.

3. Galerija ar CSS

Bet šis CSS slīdnis ir lieliski piemērots pārdošanas lapām. Parasti, izstrādājot galvenās lapas (pārdodot lapas), daudzi tīmekļa izstrādātāji jau pašā sākumā ievieto slīdni, lai pirmajā ekrānā (bez ritināšanas) apmeklētājs uzreiz redzētu visas priekšrocības, kas viņam ir pieejamas šajā lapā. Turklāt šis slīdnis ir pielāgojams, kas arī ir jauki.

4. CSS slīdnis bez saitēm

Uzreiz gribu atzīmēt, ka šis slīdnis neizmanto saites! Pēc noklusējuma papildus galvenajam attēlam (slaidam) ir redzami vēl 2 slaidi. Tie atrodas aiz galvenā. Slaidu maiņa notiek skaistā režīmā: vispirms divi slaidi tiek pārvietoti viens no otra un slaids, kas pēc tam kļūs par galveno, tiek centrēts. Pēc tam slidkalniņš tiek palielināts un novietots pārējo priekšā.

5. Responsive CSS3 slīdnis

Vēl viens adaptīvs slīdnis, kura vadība balstās uz radiopogām. Lai redzētu, kā šis slīdnis izskatīsies dažādas ierīces ah - Pārlūkprogrammas logu vari mainīt vai nu pats, vai arī lapā ar slīdni ir speciālas ikonas dažādām ierīcēm, uz kurām noklikšķinot redzēsi, kā slīdnis izskatīsies datorā, planšetdatorā vai viedtālrunī.

***BONUSA SLIDER***

Papildus visiem iepriekš minētajiem slīdņiem es vēlos jūs iepriecināt ar vēl vienu. Šis slīdnis ir lieliski piemērots attēlu galerijas izveidei. Jūs nevarat izskaidrot ar vārdiem, ko viņš dara, tāpēc labāk ir skatīties visu videoklipā:

Secinājums

Izmantojot slīdņus, varat skaisti noformēt attēlu galerijas, ievietojot tās kompaktāk, ievietot slīdni pārdošanas lapas pirmajā ekrānā (lapas daļā, kas ir redzama bez ritināšanas), lai nekavējoties parādītu apmeklētājam galvenās priekšrocības, ko viņš saņems. . Jūs joprojām varat atrast daudz veidu, kur un kā jūs varat izmantot slīdņus, taču viens ir skaidrs - tie ir noderīgi, ja tos lieto pareizi.

Punkti, kas tika apspriesti rakstā.

Pašlaik slīdnis - karuselis - ir funkcionalitāte, kas vienkārši ir nepieciešama uzņēmuma vietnē, portfeļa vietnē vai jebkurā citā resursā. Kopā ar pilnekrāna attēlu slīdņiem horizontālie karuseļa slīdņi lieliski iederas jebkurā tīmekļa dizainā.

Dažreiz slīdnim vajadzētu aizņemt vienu trešdaļu vietnes lapas. Šeit tiek izmantots karuseļa slīdnis ar pārejas efektiem un atsaucīgiem izkārtojumiem. E-komercijas vietnes izmanto karuseļa slīdni, lai atsevišķās ziņās vai lapās parādītu vairākus fotoattēlus. Slīdņa kodu var brīvi izmantot un modificēt atbilstoši jūsu vajadzībām.

Izmantojot JQuery kopā ar HTML5 Un CSS3, varat padarīt savas lapas interesantākas, nodrošinot tām unikālus efektus un pievēršot apmeklētāju uzmanību noteiktai vietnes daļai.

Slick — moderns karuseļa slīdņa spraudnis

Slikti ir brīvi izplatīts jquery spraudnis, kura izstrādātāji apgalvo, ka viņu risinājums apmierinās visas jūsu slīdņa prasības. Adaptīvs slīdnis — karuselis var darboties “ flīzes"mobilajām ierīcēm un sadaļā " vilkt un nomest"darbvirsmas versijai.

Satur pārejas efektu " vājināšanās», interesanta iespēja « centra režīms", slinka attēlu ielāde ar automātisko ritināšanu. Atjauninātā funkcionalitāte ietver slaidu pievienošanu un slaidu filtru. Tas viss, lai nodrošinātu, ka spraudnis ir konfigurēts atbilstoši savām prasībām.

Owl Carousel 2.0 — jQuery — spraudnis lietošanai skārienjūtīgās ierīcēs

Šim spraudnim ir liels funkciju kopums, kas piemērots gan iesācējiem, gan pieredzējušiem izstrādātājiem. Šī ir atjaunināta karuseļa slīdņa versija. Viņa priekšgājējam bija tāds pats vārds.

Slīdnim ir daži iebūvēti spraudņi, lai uzlabotu vispārējo funkcionalitāti. Animācija, video atskaņošana, slīdņa automātiskā atskaņošana, slinka ielāde, automātiska augstuma regulēšana - galvenās funkcijas.

Funkciju atbalsts vilkt un nomest iekļauts, lai ērtāk izmantotu spraudni mobilās ierīces.
Spraudnis ir lieliski piemērots lielu attēlu parādīšanai pat mazos mobilo ierīču ekrānos.

Diezgan mazs, bet funkcionāli bagāts jquery spraudnis, kas ļauj lapā ievietot slīdni – karuseli, kuram ir mazs kodols un kas nepatērē daudz vietnes resursu. Spraudni var izmantot, lai parādītu vertikālos un horizontālos slīdņus, ar animāciju un izveidotu attēlu kopas no galerijas.

AnoSlide — īpaši kompakts atsaucīgs jQuery slīdnis

Īpaši kompakts jQuery slīdni– karuselis, kura funkcionalitāte ir daudz lielāka nekā parastam slīdnim. Tas ietver priekšskatījums viens attēls, parādot vairākus attēlus karuseļa un slīdņa veidā, pamatojoties uz nosaukumiem.

Pūču karuselis – Jquery slīdnis – karuselis

– slīdnis ar atbalstu skārienekrāni un tehnoloģija vilkt un nomest, viegli integrējams HTML- kods. Spraudnis ir viens no labākajiem slīdņiem, kas ļauj izveidot skaistus karuseļus bez īpaši sagatavota marķējuma.

3D galerija – karuselis

Lietojumi 3D– pārejas, kuru pamatā ir CSS– stili un nedaudz Javascript kodu.

Lielisks 3D karuselis. Šķiet, ka šī joprojām ir beta versija, jo tikko atklāju ar to pāris problēmas. Ja ir interese par savu slīdņu testēšanu un izveidi, šis karuselis lieliski noderēs.

Karuselis, izmantojot bootstrap

Adaptīvais slīdnis — karuselis, izmantojot tehnoloģiju, kas ir piemērota jūsu jaunajai vietnei.

Moving Box karuseļa slīdnis, kura pamatā ir Bootstrap sistēma

Populārākais portfeļa un biznesa vietnēs. Šāda veida slīdni – karuseli – bieži var atrast jebkura veida vietnēs.

Šis mazais slīdnis ir gatavs darbam ierīcēs ar jebkuru ekrāna izšķirtspēju. Slīdnis var darboties gan apļveida, gan karuseļa režīmā. Mazs aplis piedāvāta kā alternatīva citiem šāda veida slīdņiem. Ir pieejams iebūvēts atbalsts operētājsistēmas iOS Un Android.

Apļveida režīmā slīdnis izskatās diezgan interesants. Lielisks metodes atbalsts vilkt un nomest un automātiska slaidu ritināšanas sistēma.

Jaudīgs, adaptīvs karuseļa slīdnis ir lieliski piemērots mūsdienīgai vietnei. Pareizi darbojas jebkurā ierīcē. Ir horizontāli un vertikāli režīmi. Tā izmērs ir samazināts līdz tikai 1 KB. Īpaši kompaktajam spraudnim ir arī lieliskas vienmērīgas pārejas.

Oho – slīdnis – karuselis

Satur vairāk nekā 50 efektus, kas var palīdzēt izveidot oriģinālu slīdni savai vietnei.

Mainiet pārlūkprogrammas loga izmērus, lai redzētu, kā slīdnis pielāgojas. Bxslider ir aprīkots ar vairāk nekā 50 pielāgošanas opcijām un demonstrē savas funkcijas ar dažādiem pārejas efektiem.

jCarousel — jQuery spraudnis, kas palīdzēs organizēt jūsu attēlu skatīšanu. Varat viegli izveidot pielāgotus attēlu karuseļus no piemērā redzamās bāzes. Slīdnis ir adaptīvs un optimizēts darbam mobilajās platformās.

Scrollbox — jQuery spraudnis

Ritlodziņš kompakts spraudnis slīdņa - karuseļa vai teksta slīdņa izveidošanai. Galvenās funkcijas ietver vertikālās un horizontālās ritināšanas efektus ar pauzi, novietojot kursoru virs tā.

Vienkāršs karuseļa slīdnis. Ja jums ir nepieciešams ātrs spraudnis, šis ir 100% piemērots. Nāk tikai pamata funkcijas, kas nepieciešamas, lai slīdnis darbotos.

Flexisel: atsaucīgs JQuery karuseļa slīdņa spraudnis

Radītājus iedvesmojis vecās skolas spraudnis, izveidojot tā kopiju, kas paredzēta pareiza darbība slīdni mobilajās ierīcēs un planšetdatoros.

Adaptīvs izkārtojums, ja tas darbojas mobilajās ierīcēs, atšķiras no izkārtojuma, kas ir orientēts uz pārlūkprogrammas loga izmēru. lieliski pielāgots darbam ar zemas un augstas izšķirtspējas ekrāniem.

Elastislide – adaptīvais slīdnis – karuselis

Lieliski pielāgojas ierīces ekrāna izmēram. Varat iestatīt minimālo attēlu skaitu, kas jāparāda noteiktā izšķirtspējā. Labi darbojas kā karuseļa slīdnis ar attēlu galerijām, izmantojot fiksētu aptinumu un vertikālas ritināšanas efektu.

Brīvi pieejams slīdnis no Vūtēmas. Pareizi uzskatīts par vienu no labākajiem adaptīvie slīdņi. Spraudnis satur vairākas veidnes un noderēs gan iesācējiem, gan ekspertiem.

Apbrīnojams karuselis

Apbrīnojams karuselis– ir ieslēgts adaptīvais attēla slīdnis jQuery. Atbalsta daudzas satura pārvaldības sistēmas, piemēram, WordPress, Drupal Un Joomla. Arī atbalsta Android Un iOS un operētājsistēmu darbvirsmas versijas bez saderības problēmām. Iebūvētās pārsteidzošās karuseļa veidnes ļauj izmantot slīdni vertikālā, horizontālā un apļveida režīmā.

Bezmaksas kolekcija HTML un CSS slīdnis kodu piemēri: karte, salīdzinājums, pilnekrāna režīms, atsaucīgs, vienkāršs utt. 2018. gada jūnija kolekcijas atjauninājums. 7 jaunas preces.

Satura rādītājs

Saistītie raksti

Par kodu

Ieslēgšanās ekrānu komplekts HTML/CSS/JS formātā. Personisks eksperiments ar PNG ikonu slāņošanu, CSS3 pārejām un flexbox.

HTML, CSS un JavaScript informācijas karšu slīdnis.
Izgatavojis Endijs Trans
2015. gada 23. novembris

Fotoattēlu slīdnis, kas darbojas galddatoru un mobilo ierīču pārlūkprogrammās.
Izgatavojis Tarons
2014. gada 29. septembris

Salīdzināšanas (pirms/pēc) slīdņi

Par kodu

Vienkāršs un tīrs attēlu salīdzināšanas slīdnis, pilnībā atsaucīgs un gatavs pieskārienam, izmantojot CSS un jQuery.

Par kodu

Pirms un pēc slīdnis ar tikai html un css.

Par kodu

Spēlējos ar jaunu ideju, izmantojot manu divu slāņu attēla slīdni pirms/pēc. Saglabājot to minimāli. Saglabājot to vaniļu. Patīk, ja noder :)

Vanilla JS, minimāls, patīkami izskatīties.
Izgatavots Huw
2017. gada 3. jūlijs

Par kodu

Sadalīta ekrāna slīdņa elements ar JavaScript.

Neliels eksperiments ar slīdni pirms un pēc SVG formātā. Maskēšana padara to diezgan vienkāršu. Tā kā tas viss ir SVG formātā, attēli un paraksti ir labi mērogoti kopā. Slīdņa vadībai tika izmantoti GreenSock spraudņi Draggable un ThrowProps.
Izgatavojis Kreigs Roblevskis
2017. gada 17. aprīlis

Slīdnim izmanto pielāgotu diapazona ievadi.
Izgatavotājs Dudley Storey
2016. gada 14. oktobris

Adaptīvs attēlu salīdzināšanas slīdnis ar HTML, CSS un JavaScript.
Izgatavojis Ege Görgülü
2016. gada 3. augusts

HTML5, CSS3 un JavaScript video pirms un pēc salīdzināšanas slīdnis.
Izgatavotājs Dudley Storey
2016. gada 24. aprīlis

Ērts velkams slīdnis, lai ātri salīdzinātu 2 attēlus, ko nodrošina CSS3 un jQuery.
Izgatavots CodyHouse
2014. gada 15. septembris

Pilnekrāna slīdņi

Par kodu

Vienkāršs slīdnis, kas balstīts uz radio ieejām. 100% tīrs HTML + CSS. Darbojas arī ar bulttaustiņiem.

Atsaucīgs: jā

Atkarības: -

Par kodu

Jauks pārejas efekts pilnekrāna slīdnim.

Par kodu

Horizontālais paralakses bīdāmais slīdnis ar Swiper.js.

Par kodu

Atsaucīgs vienmērīgs 3D perspektīvas slīdnis, pārvietojot peli.

Pilnekrāna varoņa attēla slīdnis (vilkšanas paneļu motīvs) ar HTML, CSS un JavaScript.
Izgatavojis Tobiass Bogliolo
2017. gada 25. jūnijs

Slīdņa mijiedarbība, izmantojot ātruma un ātruma efektus (UI pakotne), lai uzlabotu animāciju. Animācija tiek aktivizēta, izmantojot bulttaustiņus, navigācijas klikšķi vai ritināšanas ligzdu. Šajā versijā ir iekļautas robežas kā mijiedarbības daļa.
Izgatavojis Stīvens Skafs
2017. gada 11. maijs

Vienkāršs slīdnis minimālā stilā, lai parādītu attēlus. Daļa attēla parādās katrā slaidā.
Izgatavojis Neitans Teilors
2017. gada 22. janvāris

Lieta ir diezgan viegli pielāgojama. Jūs varat Droši mainiet fontu, fonta lielumu, fonta krāsu, animācijas ātrumu. Jaunas virknes pirmais burts masīvā JS tiks parādīts jaunā slaidā. Viegli izveidot (vai dzēst) jaunu slaidu: 1. Pievienojiet jaunu pilsētu JS masīvā. 2. Mainiet mainīgo slaidu skaitu un ievietojiet jaunu attēlu scss sarakstā CSS.
Izgatavojis Ruslans Pivovarovs
2016. gada 8. oktobris

1. Klipu ceļš attēla maskēšanas taisnstūra apmalei (tikai tīmekļa komplektam).
2. Sajaukšanas režīms šai maskai.
3. Gudra krāsu sistēma, vienkārši ievietojiet savas krāsas nosaukumu un vērtību sass kartē un pēc tam pievienojiet elementiem atbilstošu klasi ar šo krāsas nosaukumu, un viss darbosies!
4. Forša kredītu sānu izvēlne (noklikšķiniet uz mazās pogas demonstrācijas centrā).
5. Vaniļas js ar tikko< 200 lines of code (basically it’s just adds/removes classes).

Šis sašķiebtais slīdnis ar ritināšanu, pamatojoties uz tīru JS un CSS (bez bibliotēkām).
Izgatavojis Viktors Belozjorovs
2016. gada 3. septembris

Slīdņa animācija ar Pokemon dizainu.
Izgatavojis Pham Mikun
2016. gada 18. augusts

HTML, CSS un JavaScritp slīdnis ar sarežģītu animāciju un puskrāsainu leņķisko tekstu.
Izgatavojis Ruslans Pivovarovs
2016. gada 13. jūlijs

Slīdņa paralakses efekts ar HTML, CSS un JavaScript.
Izgatavojis Manuels Madeira
2016. gada 28. jūnijs

HTML, CSS un JavaScript slīdnis ar pulsācijas efektu.
Izgatavojis Pedro Kastro
2016. gada 21. maijs

Klipu ceļa atklāšanas slīdnis ar HTML, CSS un JavaScript.
Izgatavojis Nikolajs Talanovs
2016. gada 16. maijs

GSAP + slidens slīdnis ar iepriekšējo/nākamo slaidu priekšskatījumu.
Izgatavojis Karlo Videks
2016. gada 27. aprīlis

HTML, CSS un JavaScript pilnas lapas slīdnis.
Izgatavojis Džozefs Martuči
2016. gada 28. februāris

Pilns slīdņa prototips ar HTML, CSS un JavaScript.
Izgatavotājs Gluber Sampaio
2016. gada 6. janvāris

Pilnekrāna, sava veida atsaucīga slaidrāde, kas animēta ar Greensocks TweenLite/Tweenmax.
Izgatavots Arden
2015. gada 12. decembris

Pilnekrāna slīdnis (GSAP laika skala) #1 ar HTML, CSS un JavaScript.
Izgatavojis Diaco M.Lotfollahi
2015. gada 23. novembris

HTML un CSS slīdnis ar pielāgotiem efektiem.
Izgatavojis Nikolajs Talanovs
2015. gada 12. novembris

Pilnekrāna vilkšanas slīdnis ar paralaksi ar HTML, CSS un JavaScript.
Izgatavojis Nikolajs Talanovs
2015. gada 12. novembris

Rotējošais slīdnis koncepcijas pierādījums. Izmanto klipceļu un daudz matemātikas.
Izgatavojis Tailers Džonsons
2015. gada 16. aprīlis

Vienkāršs pilnekrāna CSS un jQuery slīdni izmantojot translateX un translate3d gludumu!
Izgatavojis Džozefs
2014. gada 19. augusts

Atsaucīgi slīdņi

Par kodu

Attēlu necaurredzamības slīdnis

Attēlu necaurredzamības slīdnis HTML un CSS.

Saderīgas pārlūkprogrammas: Chrome, Edge, Firefox, Opera, Safari

Atsaucīgs: jā

Atkarības: -

Par kodu

Stacked Elastīgo slaidu izkārtojums

Šis piemērs ilustrē, kā izveidot viens uz otra sakrautu slaidu izkārtojumu (īpaši noderīgi izgaismot/izbalināt pārejām). Tas tiek panākts, nenosakot to augstumu un izvairoties no pozīcijas: absolūts; tāpēc tie ir pilnībā elastīgi un viegli uzturējami normālā lapu plūsmā.

Saderīgas pārlūkprogrammas: Chrome, Edge, Firefox, Opera, Safari

Atsaucīgs: jā

Atkarības: -

Par kodu

Atsaucīgs slīdnis

Animēts atsaucīgs slīdnis HTML, CSS un JavaScript.

Saderīgas pārlūkprogrammas: Chrome, Edge, Firefox, Opera, Safari

Atsaucīgs: jā

Atkarības: animate.css

Par kodu

Slīdnis ar maskētu tekstu

Tikai CSS slīdnis ar maskētu tekstu.

Saderīgas pārlūkprogrammas: Chrome, Edge (daļēja), Firefox, Opera, Safari

Atsaucīgs: jā

Atkarības: -

Par kodu

Attēls un saturs ar paralakses efektu.

Par kodu

Tikai CSS slaidu galerija.

Saderīgas pārlūkprogrammas: Chrome, Edge, Firefox, Opera, Safari

Atsaucīgs: jā

Atkarības: -

Par kodu

Tīrs HTML/CSS slīdnis

Tīrs HTML/CSS slīdnis ar apļveida SVG progresa joslu.

Saderīgas pārlūkprogrammas: Chrome, Edge (daļēja), Firefox (daļēja), Opera, Safari

Atsaucīgs: jā

Atkarības: font-awesome.css

Par kodu

Eksperiments, lai izveidotu pilnībā atsaucīgu vertikālu slīdni ar sīktēliem, izmantojot tikai CSS un saglabājot attēlu malu attiecību.

Par kodu

Vienkāršs Flexbox attēlu slīdnis/karuselis, kas izveidots ar vaniļas JavaScript.

Par kodu

Šis ir eksperiments, kas simulē kustības izplūšanas efektu katru reizi, kad tiek pārslēgts slaids. Tas izmanto SVG Gaussian Blur filtra un dažu CSS atslēgkadru animācijas priekšrocības. Lai gan efektam nav nepieciešams JavaScript, lai pareizi darbotos, šajā piemērā Javascript tiek izmantots tikai slīdņa funkcionalitātei.

Par kodu

Foršs animācijas slīdnis ar JS.

Par kodu

Šis ir eksperiments par to, kā SVG modeļi var palīdzēt mums izveidot maskētus attēlus tikai CSS attēla slīdnim.

Dažu slīdņu pāreju izpēte. Swiper slīdnis ar iespējotu paralakses opciju. Spēlējot ar CSS filtriem galvenokārt šeit.
Izgatavojis Mirko Zoričs
2017. gada 12. jūnijs

Vienkāršs GSAP slīdnis ar smalkām animācijām.
Izgatavojis Goran Vrban
2017. gada 9. jūnijs

Slīdņa lietotāja saskarne ar HTML, CSS un JavaScript.
Izgatavoja Mergim Ujkani
2017. gada 6. jūnijs

Slīdnis GSAP versija 2.
Izgatavojis Em An
2017. gada 4. maijs

Nedaudz sarežģīts pārejas slīdnis, izmantojot vienkāršu pievienošanas klases piedāvājumu. Nedaudz jāizlīdzina laiki un jāizlemj par labāko pieeju mobilajām ierīcēm (vienkārši sakraujiet, pievienojiet pieskāriena notikumus, izveidojiet attēlus pilnu skata logu utt. Atbalsta ritināšanas ritenīti (ritināšanas domkrats), navigācijas pogas un bulttaustiņus. Var arī palielināt satura iesaiņojumu lai attēli aizpildītu skata logu bez animācijas, kas arī ir diezgan forši.
Izgatavojis Stīvens Skafs
2017. gada 3. janvāris

Izmantots CSS apmales attēls un klipa ceļš, lai izveidotu slīdņa animācijas efektu.
Izgatavoja Emīlija Heimena
2016. gada 31. decembris

Mazs slīdnis, kas veidots ar flexbox. Nedaudz atsaucīgs, un tajā var būt fiksēti elementi līdzās slīdņa zonai.
Izgatavojis Roberts
2016. gada 28. novembris

HTML, CSS kanvas slīdnis.
Ražots Nvagelis
2016. gada 29. oktobris

HTML, CSS un JavaScript 3D vienmērīgs slīdnis.
Izgatavojis Eduardo Allegrini
2016. gada 19. oktobris

HTML un CSS kūciņu slīdnis ar smidzinātājiem!
Izgatavojis Džeimijs Kulters
2016. gada 14. oktobris

Izgatavoja mario s maselli
2016. gada 12. oktobris

UI animācijas #2 izpēte, izmantojot HTML, CSS un JavaScript.
Izgatavoja mario s maselli
2016. gada 22. septembris

3. lietotāja lietotāja interfeisa animācijas izpēte, izmantojot HTML, CSS un JavaScript.
Izgatavoja mario s maselli
2016. gada 22. septembris

E-komercijas slīdnis v2.0 ar HTML, CSS un JavaScript.
Izgatavojis Pedro Kastro
2016. gada 17. septembris

HTML, CSS un JavaScript tīrs slīdnis ar izliektu fonu.
Izgatavojis Ruslans Pivovarovs
2016. gada 13. septembris

UI animācijas #1 izpēte, izmantojot HTML, CSS un JavaScript.
Izgatavoja mario s maselli
2016. gada 8. septembris

Izbaudiet CSS jaudu: augšup un lejup katrs vidējais attēls un lappušu slīdnis ar gaismas kārbu.
Izgatavojis Kseso
2016. gada 15. augusts

Dubultā ekspozīcija ir fotografēšanas tehnika, kas apvieno 2 dažādus attēlus vienā attēlā.
Izgatavojis Misaki Nakano
2016. gada 3. augusts

Slīdnis, izmantojot CSS3 rekvizītu klipu.
Izgatavojis Pedro Kastro
2016. gada 1. maijs

Adaptīvs CSS slīdnis.
Izgatavoja geekwen
2016. gada 19. aprīlis

Šis ir vienkāršs slīdņa eksperiments, kurā tiek parādīti vārdi ar skaistām nozīmēm, kurus nevar tieši tulkot. Fokuss: eleganta tipogrāfija un vienkāršas, taču pievilcīgas pārejas.
Izgatavojis Džo Harijs
2016. gada 5. aprīlis

Animācijas ideja ir mainīt CSS klipa ceļa vērtību, tādējādi izveidojot maskēšanas efektu.
Izgatavojis Bhakti Al Akbar
2016. gada 31. marts

Punktu slīdnis ar HTML, CSS un JavaScript.
Izgatavojis Dereks Ngujens
2016. gada 16. marts

Prizmas efektu slīdnis ar HTML, CSS un JavaScript.
Izgatavojis Viktors
2016. gada 12. marts

Bīdāma fona galerija ar HTML, CSS un JavaScript.
Izgatavojis Rons Džierlahs
2015. gada 30. novembris

HTML, CSS un JavaScript slīdņu risinājums.
Izgatavojis Jirgens Gensers
2015. gada 30. septembris

Produkta slīdnis, ko nodrošina Sequence.js. Sequence.js — adaptīva CSS animācijas sistēma unikālu slīdņu, prezentāciju, reklāmkarogu un citu pakāpju lietojumprogrammu izveidei.
Izgatavojis Ians Lunns
2015. gada 15. septembris

Mazs aplis pielāgots slīdnis.
Izgatavojis Brems de Hāns
2015. gada 11. augusts

Atsaucīgs GTA V slīdnis ar HTML, CSS un JavaScript.
Veidojis Eduards Majers
2014. gada 24. janvāris

Tas ir kā slīdnis, taču nezināmu iemeslu dēļ tas griežas kubiski.
Izgatavojis Ēriks Brūvers
2013. gada 4. decembris

Izgatavojis Hugo DarbyBrown
2013. gada 28. augusts

Vienkāršie slīdņi

Attēla pārklājuma slīdnis ar HTML, CSS un vaniļas JavaScript.
Izgatavots Yugam
2017. gada 7. jūnijs

HTML un CSS piedāvāto attēlu slīdnis.
Izgatavojis Džošua Hiberts
2016. gada 16. jūnijs

Vairāku asu attēlu slīdnis

Vairāku asu attēlu slīdnis ar HTML, CSS un JavaScript.
Izgatavoja Burak Can
2013. gada 22. jūlijs

Cube slīdnis, neliels eksperiments ar HTML5/CSS3 3D transformācijām.
Izgatavojis Iļja K.
2013. gada 26. jūnijs

Laiks nestāv uz vietas un līdz ar to progresē. Tas ietekmēja arī internetu. Jūs jau varat redzēt, kā tas mainās izskats vietnes, ir īpaši populāra adaptīvs dizains. Un šajā sakarā ir parādījušies diezgan daudz jaunu adaptīvs jquery slīdņus , galerijas, karuseļi vai līdzīgi spraudņi.
1. Atbilstošs horizontālo ziņu slīdnis

Adaptīvs horizontālais karuselis ar detalizētas instrukcijas par uzstādīšanu. Tas ir izgatavots vienkāršā stilā, bet jūs varat to veidot atbilstoši sev.

2. Slīdnis vietnē Glide.js

Šis slīdnis ir piemērots jebkurai vietnei. Tas izmanto atvērtā koda Glide.js. Slīdņa krāsas var viegli mainīt.

3. Noliekta satura slaidrāde

Adaptīvā satura slīdnis. Šī slīdņa galvenā iezīme ir attēlu 3D efekts, kā arī dažādas nejauša izskata animācijas.

4. Slīdnis, izmantojot HTML5 audeklu

Ļoti skaists un iespaidīgs slīdnis ar interaktīvām daļiņām. Tas tika izveidots, izmantojot HTML5 audeklu,

5. Attēla pārveidošanas slīdnis

Slīdnis ar morfēšanas efektu (vienmērīga pārveidošana no viena objekta uz citu). IN šajā piemērā Slīdnis ir labi piemērots tīmekļa izstrādātāja vai tīmekļa studijas portfelim portfeļa veidā.

6. Apļveida slīdnis

Slīdnis apļa formā ar attēla apvēršanas efektu.

7. Slīdnis ar izplūdušu fonu

Adaptīvs slīdnis ar pārslēgšanu un fona aizmiglojumu.

8. Atsaucīgs modes slīdnis

Vienkāršs, viegls un atsaucīgs vietnes slīdnis.

9. Slicebox — jQuery 3D attēla slīdnis(ATJAUNINĀTS)

Atjaunināta Slicebox slīdņa versija ar labojumiem un jaunām funkcijām.

10. Bezmaksas animēts reaģējošs attēlu režģis

JQuery spraudnis, lai izveidotu elastīgu attēlu režģi, kas pārslēgs kadrus, izmantojot dažādas animācijas un laikus. Tas var izskatīties labi kā fons vai dekoratīvs elements vietnē, jo mēs varam selektīvi parādīt jaunus attēlus un to pārejas. Spraudnis ir pieejams vairākās versijās.

11.Flex slīdnis

Universāls bezmaksas spraudnis jūsu vietnei. Šim spraudnim ir vairākas slīdņa un karuseļa opcijas.

12. Foto rāmis

Fotorama ir universāls spraudnis. Tam ir daudz iestatījumu, viss darbojas ātri un vienkārši, un jūs varat skatīt slaidus pilnekrāna režīmā. Slīdni var izmantot gan fiksētā izmērā, gan adaptīvi, ar vai bez sīktēliem, ar vai bez apļveida ritināšanas un daudz ko citu.

P.S.Es vairākas reizes uzstādīju slīdni un domāju, ka tas ir viens no labākajiem

13. Bezmaksas un adaptīva 3D slīdņu galerija ar sīktēliem.

Eksperimentālās galerijas slīdnis 3DPanelLayout ar režģi un interesantiem animācijas efektiem.

14. Slīdnis uz css3

Adaptīvais slīdnis ir izveidots, izmantojot css3 ar vienmērīgu satura izskatu un vieglu animāciju.

15. WOW Slīdnis

WOW slīdnis ir attēla slīdnis ar pārsteidzošiem vizuāliem efektiem.

17.Elastīga

Elastīgs slīdnis ar pilnu atsaucību un slaidu sīktēli.

18. Šķēlums

Šis ir pilnekrāna reaģējošs slīdnis, kurā tiek izmantota css3 animācija. Slīdnis ir izgatavots divās versijās. Animācija tiek veikta diezgan neparasti un skaisti.

19. Adaptīvā fotogalerija plus

Vienkārši bezmaksas slīdnis-galerija ar attēlu ielādi.

20. Responsive Slider for WordPress

Adaptīvs bezmaksas slīdnis priekš WP.

21. Parallax satura slīdnis

Slīdnis ar paralakses efektu un katra elementa kontrole, izmantojot CSS3.

22. Slīdnis ar mūzikas saiti

Slīdnis, izmantojot JPlayer atvērtā pirmkoda kodu. Šis slīdnis atgādina prezentāciju ar mūziku.

23. Slīdnis ar jmpress.js

Adaptīvais slīdnis ir balstīts uz jmpress.js, un tāpēc tas ļaus slaidiem pievienot dažus interesantus 3D efektus.

24. Fast Hover Slideshow

Slaidrāde ar ātru slaidu pārslēgšanu. Slaidu slēdzis virza kursoru.

25. Attēlu akordeons ar CSS3

Attēlu akordeons, izmantojot css3.

26. Pieskāriena optimizēta galerijas spraudnis

Šī ir atsaucīga galerija, kas ir optimizēta skārienierīcēm.

27. 3D galerija

3D sienas galerija- izveidots pārlūkprogrammai Safari, kur būs redzams 3D efekts. Ja skatāties uz to citā pārlūkprogrammā, funkcionalitāte būs laba, taču 3D efekts nebūs redzams.

28.Slīdnis ar lappusēm

Adaptīvs slīdnis ar lappusi, izmantojot JQuery UI slīdni. Ideja ir izmantot vienkāršu navigācijas koncepciju. Ir iespējams attīt visus attēlus vai pārslēgt pa slaidiem.

29.Attēlu montāža ar jQuery

Automātiski sakārtot attēlus atkarībā no ekrāna platuma. Ļoti noderīga lieta, veidojot portfeļa vietni.

30. 3D galerija

Vienkāršs 3D apļveida slīdnis, izmantojot css3 un jQuery.

31. Pilnekrāna režīms ar 3D efektu, izmantojot css3 un jQuery

Slīdnis ar iespēju skatīt pilnekrāna attēlus ar skaistu pāreju.

Strādājot pie grāmatas par jquery, es saskāros ar faktu, ka daudzi mani abonenti lūdza man tajā pastāstīt, kā uzrakstīt slīdņa skriptu jquery. Atvainojiet, dārgie draugi! Šis ir 21. gadsimts un, par laimi, mums ir pieejami visi CSS3 jaukumi, kas ļauj īstenot šādas lietas bez vienas rindas javascript.

1. daļa.

Sākumā es paskaidrošu tiem, kas nezina, kas ir slīdnis. Slīdnis- tas ir noteikta platuma bloks, kas aizņem daļu no tīmekļa lapas vai visu to. Tās galvenā iezīme ir tā, ka tā mainās automātiski vai manuālais režīms saturu. Saturs var būt: grafiskie attēli un nedaudz teksta.

Protams, jums var rasties jautājums: kāpēc no jauna izgudrot riteni, ja JavaScript ir daudz slīdņu ieviešanas? Šeit ir mani argumenti:

1. CSS efekti ir ātrāki. Tas ir skaidri redzams mobilajās ierīcēs.
2. Lai izveidotu slīdni, nav nepieciešamas programmēšanas prasmes.

Tātad, mūsu piemēram, jums ir nepieciešami četri attēli, lai gan savā projektā varat izveidot sloksni ar tik daudz attēlu, cik nepieciešams. Vienīgais nosacījums ir, ka visiem attēliem jābūt vienāda izmēra. Es arī aizmirsu jums pateikt, ka mūsu slīdnis būs adaptīvs (jā, Adaptīvs izkārtojums , jūs to izlasījāt pareizi), un varat to izmantot jebkurā no projektiem jebkurai ierīcei. Bet, pietiks pļāpāt, man jau niez rakstīt megakodu. Sāksim ar HTML:

Es atstāju atribūtu alt tukšu, lai ietaupītu vietu, taču varat to aizpildīt pats, pamatojoties uz SEO vaicājumiem un informēt lietotājus, kuri ir atspējojuši attēlu rādīšanu savā pārlūkprogrammā. Vēlos vērst jūsu uzmanību arī uz to, ka pirmais attēls ( alladin.jpg) būs arī joslas galā, kas ļaus mūsu slīdnim cikliski ritināt bez raustīšanās.

Ērtības labad platums ir 80% no loga, un maksimālais platums ir katra atsevišķa fotoattēla izmērs (mūsu piemērā 1000 pikseļi), jo mēs nevēlamies, lai attēls būtu izstiepts:

Slīdnis (platums: 80%; maksimālais platums: 1000 pikseļi; )

Mūsu CSS kodā skaitļa platums ir izteikts procentos no div, kurā tas atrodas. Tas nozīmē, ka, ja attēla joslā ir pieci fotoattēli un div veido tikai vienu, attēla platums tiek palielināts piecas reizes, kas ir 500% no konteinera div platuma:

Fonta lieluma: 0 iestatījums izsūc visu gaisu no attēla, noņemot balto laukumu ap un starp attēliem. pozīcija: relatīvais ļauj ērti pārvietot figūru animācijas laikā.

Mums ir vienādi jāsadala fotoattēli attēla joslā. Formula ir ļoti vienkārša: ja pieņemam, ka figūras platums ir 100%, katram attēlam vajadzētu aizņemt 1/5 no horizontālās vietas:

Ir nepieciešams izmantot šādus CSS noteikumus:

Attēlu joslas img (platums: 20%; augstums: automātisks; )

Tagad mainīsim div pārpildes rekvizītu:

Slīdnis (platums: 80%; maksimālais platums: 1000 pikseļi; pārpilde: paslēpts)

Visbeidzot, mums ir jāpārvieto attēla josla no kreisās puses uz labo. Ja konteinera div platums ir 100%, katra attēla joslas kustība pa kreisi tiks mērīta procentos no šī attāluma:

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

Katrs attēls uz slīdņa tiks iekļauts divdaļā un pārvietosies par 5%.

Slīdņa figūra (pozīcija: relatīvā; platums: 500%; animācija: 30 s slīdošs bezgalīgs; fonta lielums: 0; polsterējums: 0; piemale: 0; pa kreisi: 0; )

2. daļa.

Mēs padarījām to mega foršu slīdni bez javascript. Pievienosim tai vadības pogas, pirms paliekam uz lauriem. Precīzāk, ne tajā (man jau ir slinks, lai ar to ķertos), bet veidosim jaunu.

Tātad, mūsu HTML kods:

Tagad parūpēsimies par mūsu slaidu animēšanu. Diemžēl dažādam slaidu skaitam tas būs atšķirīgs:

/* divu slaidu slīdim */ @keyframes slider__item-autoplay_count_2 ( 0%(necaurredzamība:0;) 20%(necaurredzamība:1;) 50%(necaurredzamība:1;) 70%(necaurredzamība:0;) 100% ( necaurredzamība:0;) ) /* trīs slaidu slīdim */ @keyframes slider__item-autoplay_count_3 ( 0%(necaurredzamība:0;) 10%(necaurredzamība:1;) 33% (necaurredzamība:1;) 43% ( necaurredzamība: 0;) 100%(necaurredzamība:0;) ) /* četru slaidu slīdnim */ @keyframes slider__item-autoplay_count_4 ( 0%(necaurredzamība:0;) 8% (necaurredzamība:1;) 25% (necaurredzamība:1;) :1; ) 33% (necaurredzamība:0;) 100%(necaurredzamība:0;) ) /* piecu slaidu slīdnim */ @keyframes slider__item-autoplay_count_5 ( 0%(necaurredzamība:0;) 7% (necaurredzamība: 1;) 20% (necaurredzamība:1;) 27% (necaurredzamība:0;) 100%(necaurredzamība:0;) )

Skumji, vai ne? Turklāt neaizmirstiet, ka Opera, Chrome, IE un Mozilla jums viss ir jāraksta vienādi, bet ar atbilstošu prefiksu. Tagad rakstīsim kodu, lai animētu mūsu slaidus (turpmāk tiks parādīts trīs slaidu kods. Koda paraugā varat redzēt kodu citām vietnēm):

Slīdnis .item :nth -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; )

Kā redzat, pirmajam pārim nulles nobīde nemainās. Turklāt nobīde nav atkarīga no slaidu skaita, tāpēc to var aprakstīt vienu reizi maksimālajam slaidu skaitam. Tagad pārliecināsimies, ka slaidi nemainās, kad lietotājs virza kursoru virs mūsu slīdņa:

Slīdnis:hover .item ( -moz-animation-play-state: apturēts; -webkit-animation-play-state: apturēts; -o-animation-play-state: apturēts; animation-play-state: apturēts; )

Beidzot mums ir jāmaina slaidi. Kā jūs zināt, ir vairāki notikumi, kas ļauj mainīt elementa īpašības, kad CSS palīdzība. Noklikšķinot ar peli, mums var palīdzēt pseidoklases :focus, :target vai :checked vienā no lapas elementiem. Pseidoklasei :focus var būt tikai viens elements vienā lapā, :target aizsprosto pārlūkprogrammas vēsturi un prasa tagu klātbūtni; Pseidoklase:checked atceras stāvokli pirms lapas aiziešanas, un radiopogu gadījumā to var atlasīt tikai vienā grupas elementā. Izmantosim šo iespēju. Ievietojiet pirms