Hammaste haigused 24.11.2020

0 (0 hääled)

Vastupidav karussell alglaadimiseks 3. Looge mõne lihtsa sammuga oma alglaadimisliugur. Muutke ülemineku kestust

Välimuse animatsioonikarussell (Bootstrap 4)

Lisage karussellile tuhmumisklass, et muuta üleminekuanimatsioon animatsiooni tuhmumiseks.

Karusselli lähtestamine JavaScriptiga

Karusselli saab aktiveerida JavaScripti koodi abil:

$(".karussell").karussell();

Asendage ".carousell" vastava valijaga, et valida aktiveerimiseks üks või mitu karusselli.

Karusselli seadistamine

Karussell konfigureeritakse parameetrite abil. Parameetreid saab määrata nii andmeatribuutide kui ka JavaScripti abil.

Andmeatribuutide kasutamisel lisage parameetri nime ette data- . Näiteks intervalli parameetri määramiseks peate kasutama atribuuti nimega data-interval .

Nimi	Kirjeldus
intervall	Vaikeväärtus (millisekundites): 5000, s.o. 5 sekundit. Intervalli parameeter määrab aja millisekundites (paus) automaatsete karusselli slaidi üleminekute vahel. Kui see parameeter on seatud väärtusele false , ei teosta karussell automaatseid slaidiülekandeid.
klaviatuur	Vaikeväärtus: true. See parameeter määrab, kas karussell peaks reageerima klaviatuuri sündmustele.
paus	Vaikeväärtus: "hover". Kui pausi parameetriks on seatud "hover" , siis slaidi üleminekut ei teostata, kui kursor on selle kohal. Ja kui te kursorilt lahkute, jätkub slaidi muutmine uuesti. Kui pausi parameeter on seatud väärtusele false , siis karusselli kohal hõljutamine ei peata automaatset slaidi üleminekut. Kui puuteekraaniga seadmetes on seatud olekusse „hõljutamine”, määratakse paus puudutamiseks. Kuid pärast koputamist hakkab karussell slaide vahetama alles 2 intervalli järel (vaikimisi on 10 sekundit).
sõitma	Vaikeväärtus: false. Kui väärtuseks on määratud Väär , käivituvad automaatsed slaidi üleminekud alles pärast seda, kui kasutaja navigeerib käsitsi (kasutades juhtnuppe või indikaatoreid) teisele slaidile. Kui määrate selle parameetri väärtuseks "karussell" , käivitub slaidi muutmine automaatselt kohe pärast lehe laadimist.
mähis	Vaikeväärtus: true. See parameeter määrab, kas slaidi üleminek peaks toimuma. Need. pärast viimast slaidi toimub üleminek esimesele järgmisele liikumisel ja pärast esimest viimasele liigutamisel eelmine . Kui see pole vajalik, tuleb wrap parameetri väärtuseks määrata false .

Karussellplugina meetodid

Karusselli pistikprogrammi meetodid on näidatud tabelis.

Näide parameetritega karusselli initsialiseerimisest:

...

Näide karusselli juhtimise meetodite kasutamisest:

...

Karusselli pistikprogrammi sündmused

JS Bootstrap käivitab karusselli jaoks kaks sündmust.

Mõlemal sündmusel on järgmised lisaomadused.

• suund - libisemissuund ("vasakule" või "paremale" );
• relatedTarget – DOM-i element, mis teisaldatakse praegusesse asukohta;
• from - praeguse elemendi indeks;
• kuni - järgmise elemendi indeks.

Atribuudid from ja to on saadaval ainult versioonis Bootstrap 4.

Sündmustega töötamise näide:

...

Näide Bootstrap 3 karussellsündmustega töötamise kohta:

Avatud näide

Ülemineku kestuse muutmine (Bootstrap 4)

Carousel-item elementide ülemineku kestust saab enne kompileerimist muuta muutuja $carousel-transition Sass abil või kohandatud stiiliga, kui kasutate juba kompileeritud CSS-i. Kui rakendate mitut üleminekut, viige esmalt läbi üleminekuteisendus (näiteks: teisendus 2,5 s lihtsus, läbipaistmatus 0,75 s kergendus).

Näited

1. Automaatse slaidi nummerdamisega karussell:

...

Rakendame liugurit Bootstrap Frameworkis, mis on tuntud ka kui Twitter Bootstrap. Selleks minge Bootstrapi veebisaidile, laadige selle failid arvutisse ja edastage need failid oma arenduskeskkonda.

Valmistasin kogu struktuuri eelnevalt ette, ühendasin need nendega registrifailis ja kogu arhiivi saate alla laadida allolevalt lingilt.

Pakkige see lahti ja edastage kõik failid oma arenduskeskkonda.

Mõelge arhiivi struktuurile

Vaatame üle selle arhiivistruktuuri ja kaalume, mis selles on.

Avame registrifaili, kõige ülaosas on ühendatud Jquery teek, selle taga on js-laiendiga alglaadimisraamistik, mis asub JS-kaustas, pärast seda ühendame alglaadimisfaili CSS-laiendiga ja allpool ühendame fail, kuhu kirjutame oma stiilid, kõik see asub CSS-i kaustas. Fontide kaustas on ikoonid, mida bootstrap kasutab, Img-s on pildid liuguri jaoks ja pilt tausta jaoks.

See on kogu mall ja kogu selle struktuur, siis jätkame raamistiku kirjeldusega.

Liuguri raami kirjeldamine

Loo div liuguriga id id="dws-slider" , lisa klass "carousell slide" .

Seejärel kirjutame slaidi iga elemendi eraldi plokki ja teeme neist kolm.

(.item>img+.carousel-caption>h3.text-suurtähed+p)*3

Ja selleks, et kuvada esimene slaid, tuleb esimesele elemendile lisada klass .active. Seejärel täidame plokid tekstisisuga.

Nüüd lisame juhtelemendid liuguri külgedele.

Eelmine Edasi

Lõpetame ajutiselt automaatse nimekirja lisamise.

Lisame kerimisnäidikud.

Stiilide ja animatsiooni kirjeldamine

Läheme stiilifaili ja kirjeldame plokke tekstiga.

Carousel-inner h3 ( taustavärv: rgba(20, 49, 68, 0,6); polster: 20 pikslit; ) .carousel-inner p ( fondi suurus: 18 pikslit; taustavärv: rgba(30, 29, 29, 0,6) ); polster: 20 pikslit;)

Määrake neile võtmekaadrid ja looge animatsioon.

Carousel-inner h3 ( taustavärv: rgba(20, 49, 68, 0,6); polster: 20 pikslit; animatsioon: anim-H3 1,3 s kergendus; ) .carousel-inner p ( fondi suurus: 18 pikslit; tausta- värv: rgba(30, 29, 29, 0,6); polster: 20 pikslit; animatsioon: anim-P 1,6 s kergendus; ) @keyframes anim-H3 ( alates ( läbipaistmatus: 0; teisendus: translateX(-2000px); ) to ( läbipaistmatus: 1; teisenda: translateX(0); ) ) @keyframes anim-P ( alates ( läbipaistmatus: 0; teisenda: translateX(2000px); ) kuni ( läbipaistmatus: 1; teisenda: translateX(0); ) )

Plokkide kohandamine tekstiga

Meediumipäringu stiilide korrektseks toimimiseks kirjutame vaateava metasilti.

Minge meediumifaili ja kirjeldage selles erinevate laiendite tekstiga plokkide stiile.

Carousel-inner h3 ( fondi suurus: 20 pikslit; polsterdus: 15 pikslit; ) .carousel-inner p ( fondi suurus: 16 pikslit; polsterdus: 10 pikslit; ) @meedia kõik ja (maksimaalne laius: 768 pikslit) ( . carousel-caption ( . alumine: 10%; ) .carousell-inner h3 ( fondi suurus: 18 pikslit; ) .carousel-inner p ( fondi suurus: 14 pikslit; ) ) @meedia kõik ja (maksimaalne laius: 600 pikslit) ( .carousell-inner h3 ( kuva: puudub; ) .carousel-inner p ( kuva: puudub; ) )

Seejärel saate määrata automaatse kerimise pikkuseks 7 sekundit ja liugur on valmis.

Kui teile meeldis Bootstrap 3 liuguri rakendamise näide, jagage seda oma sõpradega sotsiaalvõrgustikes.

Tunni valmistas ette Gorelov Denis.

Head päeva kõigile, kes soovivad Bootstrap raamistiku elementidest midagi uut õppida. Tänane teema on Bootstrap Carousel liugur. See on populaarne element, mis on olemas peaaegu igal veebisaidil.

Seetõttu räägin teile, kuidas luua karusselli liugurit, milliseid sisseehitatud tööriistu selleks vaja on, kuidas saate parameetreid konfigureerida, ja artikli lõpus näitan konkreetse näite rakendamist. Ja nüüd asuge asja kallale!

Kõik Bootstrapi karusselli pistikprogrammide tööriistade kohta

Karussell-tüüpi pildigaleriid kasutatakse uute pakkumiste, toodete, jooksvate kampaaniate nimekirja, portfellide hõlpsaks vaatamiseks jne. Seetõttu on tänapäeval oluline, et saaksime selle pistikprogrammiga töötada ametliku nimetuse Bootstrap Carousel Plugin all.

Tuleb kohe märkida, et Internet Explorer 9 ja varasemad versioonid ei toeta kirjeldatud elementi korralikult. Siiski töötab see suurepäraselt (WordPressi, Joomla! ja teiste mootorite puhul on raamistiku ühendamine üsna lihtne).

Kõigi parameetritega hõlpsaks kasutamiseks ja liuguri kiireks kohandamiseks peate õppima Bootstrap 3 peamised sisseehitatud klassid.

Klass	eesmärk
karussell	Loob ise liuguri Karussell.
libisema	Lisab css-iga animatsiooni ja üleminekute efekti slaidide vahel vahetades. Tund on vabatahtlik.
karusselli indikaatorid	Lisab iga pildi alla nii-öelda väikeste täppide kujul juhtpaneeli, mille abil saab kiiresti lülituda suvalisele pildile. Tund on vabatahtlik.
karussell-sisemine	Lisab slaidid ise galeriisse.
karussell-pealkiri	Vastutab graafiliste failide allkirjastamise eest. Soovi korral saab kaasa.
üksus	Määrab iga slaidi jaoks sisukomplekti.
Parem/vasak karusselljuhtimine	Lisab kaadrite vahel vahetamiseks parem- ja vasakpoolsed nupud vastavalt nimele.

Lisaks tasub teada selliste galeriide paigutuse muid funktsioone.

Alustuseks nõuab karusselliploki loomine ise deklaratsiooni id="minuKarussell" viimase korrektseks toimimiseks.

Samas divis peate atribuudi registreerima data-ride="karussell", mis määrab, et animatsioon tuleb laadida kohe pärast lehe laadimist.

Liigume nüüd indikaatorite juurde. Igal li-sildil peaks olema paar atribuuti: andmesihtmärk, mis osutab konkreetse karusselli ID-le ja data-slide-to, mis määrab, millise kaadri numbrile minna.

Mis puudutab nuppe, mis lülitavad pilte edasi või tagasi, siis nende rakendamiseks tasub atribuut registreerida andme-slaid märksõnaga "eelmine" või "järgmine".

Nüüd teate raamistiku põhielemente, tänu millele saate liuguri kuva teatud viisil redigeerida. Loomulikult saate keelata raami automaatse kerimise, piltide pealdised või küljenupud.

Alternatiivsed juhtimismehhanismid

Lisaks Bootstrapi sisseehitatud klasside kasutamisele võite vaadata ka . Seega on JS-is palju meetodeid ja valikuid, mis rakendavad kõiki samu toiminguid, ainult tööriista $.carousel () kaudu. Nende hulgas võib loetleda näiteks:

teadmiste test

Noh, nüüd on aeg kontrollida, kuidas materjali õppisite, ja saadud teadmisi kinnistada. Selleks kirjeldan iga toimingut, mida peate "Karusselli" loomisel tegema.

Kõigepealt peate lisama vajalikud skriptid ja stiilid. Eelistan, kuid saate raamistiku alla laadida ametlikult veebisaidilt ( http://getbootstrap.com/) ja asetage allalaaditud failid projekti kataloogi juure.

Kui nõustute minuga, kirjutame dokumendi päisesse:

1 2 3

Kui olete teise meetodi toetaja, peate lingi esimese osa asemel sisestama faili tee.

Nüüd jääb alles liuguris rakendada. Selleks kasutage omandatud teadmisi ja kirjutage vajalikud koodijupid järjekorras:

1. kirjeldatud instrumendi eest vastutava ühise ploki avamine;
2. plokk juhtnäidikute määramiseks;
3. plokk liumägede endi jaoks;
4. külgmiste nuppude rakendamine.

Sellest loendist saab välja jätta ainult teise ja viimase div.

Nüüd olete kindlasti valmis koodi kirjutama.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76

/*Loo põhiplokk*/ /*Slaidide täitmine*/ Romantiline Pidulik Kodu Pulmad Eelmine Edasi

Slaidiseansi komponent elementide-piltide või tekstislaidide vahel liikumiseks nagu karussell.

Kuidas see töötab

Karussell on CSS-i 3D-teisenduste ja natukese JavaScripti abil üles ehitatud slaidiseanss, mis võimaldab liikuda läbi sisusarja. See töötab piltide, teksti või kohandatud märgistusega. See hõlmab ka eelmiste/järgmiste juhtelementide ja indikaatorite tuge.

Pidage meeles, et pesastatud karusselle ei toetata ja karussellid ei järgi üldiselt juurdepääsetavuse standardeid.

näide

Karussellid ei normaliseeri automaatselt slaidi mõõtmeid. Seetõttu peate võib-olla kasutama täiendavaid utiliite või kohandatud stiile, et sisu sobivat suurust muuta. Kuigi karussellid toetavad eelmisi/järgmisi juhtelemente ja indikaatoreid, pole need otseselt nõutavad. Lisage ja kohandage oma äranägemise järgi.

Ühele slaidile tuleb lisada klass .active muidu pole karusselli näha. Samuti määrake valikuliste juhtelementide jaoks kindlasti karussellile kordumatu ID, eriti kui kasutate ühel lehel mitut karusselli. Juht- ja indikaatorelementidel peab olema atribuut data-target (või linkide puhul href), mis ühtib elemendi .carousel ID-ga.

ainult slaidid

Siin on ainult slaididega karussell. Pange tähele .d-ploki ja .w-100 olemasolu karussellpiltidel, et vältida brauseri kujutise vaikejoondamist.

Kohatäide Esimene slaid

Kohatäide Teine slaid

Kohatäide Kolmas slaid

Juhtseadmetega

Eelmiste ja järgmiste juhtelementide lisamine:

Näitajatega

Lisaks juhtnuppudele saate karussellile lisada ka indikaatoreid.

Koos pealdistega

Lisage oma slaididele hõlpsasti pealdisi elemendi .carousel-caption abil mis tahes .carousel-üksuses. Neid saab valikuliste kuvautiliitidega hõlpsasti väiksematesse vaateavadesse peita, nagu allpool näidatud. Peidame need algselt koodiga .d-none ja toome need tagasi keskmise suurusega seadmetele koos .d-md-blockiga.

Kohatäide Esimene slaid

esimese slaidi silt

Nulla vitae elit libero, a pharetra augue mollis interdum.

Kohatäide Teine slaid

teise slaidi silt

Lorem ipsum dolor sit amet, consectetur adipiscing eliit.

Kohatäide Kolmas slaid

kolmanda slaidi silt

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

ristumine

Lisage oma karussellile .carousel-fade, et animeerida slaide slaidi asemel tuhmumise üleminekuga.

Individuaalne .karussell-üksuse intervall

Lisage .carousell-üksusele data-interval="", et muuta viivitusaega, mis kulub automaatselt järgmise üksuseni liikumise vahel.

Kasutamine

Andmeatribuutide kaudu

Kasutage karusselli asukoha hõlpsaks juhtimiseks andmeatribuute. data-slide aktsepteerib märksõnu eelmine või järgmine , mis muudab slaidi positsiooni praeguse asukoha suhtes. teise võimalusena kasutage toores slaidiindeksi edastamiseks karusselli data-slide-to="2" slaidiindeksit data-slide-to , mis nihutab slaidi positsiooni kindlale indeksile, mis algab numbriga 0 .

Atribuuti data-ride="carousel" kasutatakse karusselli animeerivaks märkimiseks alates lehe laadimisest. Kui te ei kasuta karusselli lähtestamiseks funktsiooni data-ride="carousel", peate selle ise lähtestama. Seda ei saa kasutada koos sama karusselli (liigse ja mittevajaliku) selgesõnalise JavaScripti lähtestamisega.

JavaScripti kaudu

Helistage karusselli käsitsi:

$(".karussell"). karussell ()

Valikud

Valikud saab edastada andmeatribuutide või JavaScripti kaudu. Andmeatribuutide jaoks lisage valiku nimi lahtrisse data- , nagu ka andmeinterval="" .

Nimi	tüüp	Vaikimisi	Kirjeldus
intervall	number	5000	Aeg, mis kulub üksuse automaatse tsükli vahel. Kui see on vale, ei käivitu karussell automaatselt.
klaviatuur	tõeväärtus	tõsi	Kas karussell peaks reageerima klaviatuuri sündmustele.
paus	string | tõeväärtus	hõljuma	Kui see on seatud "hover" , peatab karusselli tsükli mouseenter'is ja jätkab karusselli liikumist mouseave'is. Kui see on seatud väärtusele Väär , ei peata karusselli kohal hõljutamine seda. Puutetoega seadmetes, kui see on seatud asendisse „Hõljutamine”, peatub jalgrattasõit puute korral (kui kasutaja on karusselliga suhtlemise lõpetanud) kaheks intervalliks enne automaatset jätkumist. Pange tähele, et see on lisaks ülaltoodud hiire käitumisele.
sõitma	string	vale	Esitab karusselli automaatselt pärast seda, kui kasutaja on esimese üksuse käsitsi tsüklistanud. Kui "karussell", esitab karusselli laadimisel automaatselt.
mähis	tõeväärtus	tõsi	Kas karussell peaks pidevalt tiirlema ​​või peaks olema raskeid peatusi.
puudutada	tõeväärtus	tõsi	Kas karussell peaks toetama puuteekraaniga seadmetes vasakule/paremale pühkimist.

meetodid

Asünkroonsed meetodid ja üleminekud

Kõik API meetodid on asünkroonne ja alusta a üleminek. Nad naasevad helistaja juurde kohe pärast üleminekut, kuid enne kui see lõpeb. Lisaks meetod kutsub a üleminekukomponenti ignoreeritakse.

.carousell(valikud)

Lähtestab karusselli valikuliste valikute objektiga ja hakkab üksuste vahel ringi liikuma.

$(".karussell"). karussell (( intervall : 2000 ))

.carousel("tsükkel")

Liigub läbi karusselli üksuste vasakult paremale.

.carousel("pause")

Peatab karusselli esemete vahel liikumise.

.carousel(number)

Liigutab karusselli konkreetse kaadri juurde (0-põhine, sarnane massiiviga). Naaseb helistaja juurde enne sihtüksuse kuvamist

.carousel("eelmine")

Liigub eelmise üksuse juurde. Naaseb helistaja juurde enne eelmise üksuse kuvamist(st enne slide.bs.carousell sündmuse toimumist).

.carousel("järgmine")

Liigub järgmise üksuse juurde. Naaseb helistaja juurde enne, kui järgmine üksus on näidatud(st enne slide.bs.carousell sündmuse toimumist).

.carousel("dispose")

Hävitab elemendi karusselli.

Sündmused

Bootstrapi karusselliklass paljastab kaks sündmust karusselli funktsioonidega liitumiseks. Mõlemal sündmusel on järgmised lisaomadused:

• suund: suund, milles karussell libiseb (kas "vasakule" või "paremale").
• relatedTarget: DOM-i element, mis libistatakse aktiivse üksusena kohale.
• alates: praeguse üksuse indeks
• to: järgmise üksuse register

Kõik karussellisündmused käivitatakse karusselli enda (st