Carousel
Karolo ea li-slideshow bakeng sa ho tsamaea ka libaesekele-litšoantšo kapa li-slide tsa mongolo-joaloka carousel.
Kamoo e sebetsang kateng
Carousel ke slideshow ea ho palama libaesekele ka har'a letoto la litaba, e hahiloeng ka li-transform tsa CSS 3D le JavaScript e nyane. E sebetsa ka letoto la litšoantšo, mongolo, kapa letšoao la tloaelo. E boetse e kenyelletsa tšehetso bakeng sa litsamaiso tse fetileng / tse latelang le matšoao.
Ho li-browser moo API ea Ponahalo ea Leqephe e tšehelitsoeng, carousel e tla qoba ho thella ha leqephe la webo le sa bonahale ho mosebelisi (joalo ka ha sebatli se sa sebetse, fensetere ea sebatli e fokotsehile, joalo-joalo).
Liphetho tsa animation tsa karolo ena li ipapisitse le prefers-reduced-motion
potso ea media. Sheba karolo e fokolitsoeng ea motsamao oa litokomane tsa phihlello ea rona .
Ka kopo hlokomela hore li-carousels tse kentsoeng lihlaheng ha li tšehetsoe, 'me li-carousels hangata ha li tsamaellane le maemo a phihlello.
Qetellong, haeba u theha JavaScript ea rona ho tsoa mohloling, e hlokautil.js
.
Mohlala
Li-carousels ha li iketsetse litekanyo tsa li-slide ka botsona. Ka hona, ho ka 'na ha hlokahala hore u sebelise lisebelisoa tse eketsehileng kapa mekhoa e tloaelehileng ho etsa boholo bo nepahetseng. Leha li-carousel li tšehetsa litsamaiso le matšoao a fetileng/tse latelang, ha li hlokehe ka ho hlaka. Eketsa 'me u iketsetse kamoo u bonang ho loketse kateng.
Sehlopha .active
se hloka ho kenyelletsoa ho e 'ngoe ea li-slide ho seng joalo carousel e ke ke ea bonahala. Hape etsa bonnete ba hore u beha id e ikhethang ho .carousel
li-control tseo u ka li khethang, haholo-holo haeba u sebelisa li-carousel tse ngata leqepheng le le leng. Taolo le likarolo tsa matšoao li tlameha ho ba le data-target
tšobotsi (kapa href
bakeng sa lihokelo) tse tsamaellanang le id ea .carousel
element.
Li-slide feela
Ke ena carousel e nang le li-slide feela. Ela hloko boteng ba litšoantšo tsa carousel .d-block
le .w-100
tsa carousel ho thibela tlhophiso ea setšoantšo sa kamehla.
Ka taolo
Kenyelletsa litaolo tse fetileng le tse latelang:
Ka matšoao
U ka boela ua eketsa matšoao ho carousel, hammoho le litsamaiso, hape.
Ka litlhaloso
Kenya litlhaloso ho li-slide tsa hau habonolo ka .carousel-caption
karolo e ka har'a .carousel-item
. Li ka patoa habonolo libakeng tse nyane tsa pono, joalo ka ha ho bonts'itsoe ka tlase, ka lisebelisoa tsa boikhethelo . Re li pata qalong ka .d-none
le ho li khutlisetsa ka lisebelisoa tsa boholo bo mahareng tse nang le .d-md-block
.
Crossfade
Eketsa .carousel-fade
ho carousel ea hau ho phelisa li-slide ka ho fifala ho e-na le li-slide.
.carousel-item
Nako ea motho ka mong
Kenya data-interval=""
ho a .carousel-item
ho fetola nako ea ho lieha pakeng tsa ho palama baesekele ka bo eona ho ea nthong e latelang.
Tšebeliso
Ka litšobotsi tsa data
Sebelisa litšobotsi tsa data ho laola boemo ba carousel habonolo. data-slide
e amohela mantsoe a sehlooho prev
kapa next
, e fetolang boemo ba slide ho ipapisitse le boemo ba hona joale. Ntle le moo, sebelisa data-slide-to
ho fetisa index ea li-slide e tala ho carousel data-slide-to="2"
, e fetolang boemo ba li-slide ho index e itseng e qalang ka 0
.
Tšobotsi data-ride="carousel"
e sebelisoa ho tšoaea carousel e le e phelang ho qala ka palo ea maqephe. Haeba u sa sebelise data-ride="carousel"
ho qala carousel ea hau, u tlameha ho e qala ka bouena. E ke ke ea sebelisoa hammoho le (ho sa hlokahale le ho sa hlokahale) ho qalisoa ka ho hlaka ha JavaScript ea carousel e tšoanang.
Ka JavaScript
Letsetsa carousel ka letsoho ka:
Dikgetho
Likhetho li ka fetisoa ka lintlha tsa data kapa JavaScript. Bakeng sa litšobotsi tsa data, kenya lebitso la khetho ho data-
, joalo ka data-interval=""
.
Lebitso | Mofuta | Ea kamehla | Tlhaloso |
---|---|---|---|
karohano | palo | 5000 | Nako ea ho lieha pakeng tsa ho palama ntho ka bo eona. Haeba e le leshano, carousel e ke ke ea potoloha ka bo eona. |
keyboard | boolean | 'nete | Hore na carousel e lokela ho arabela liketsahalong tsa keyboard. |
kgefutsa | khoele | boolean | "tsamaea" | Ha e setetswe ho Lisebelisoa tse lumelletsoeng ho ama, ha li setiloe ho |
palama | khoele | bohata | E bapala carousel ka mor'a hore mosebelisi a potolohe ntho ea pele. Haeba "carousel", e bapala carousel ka ho toba. |
thatela | boolean | 'nete | Hore na carousel e lokela ho potoloha ka ho sa feleng kapa e eme ka thata. |
thetsa | boolean | 'nete | Hore na carousel e lokela ho ts'ehetsa litšebelisano tsa swipe ka ho le letšehali / ka ho le letona ho lisebelisoa tsa sekirini sa ho ama. |
Mekhoa
Mekhoa ea Asynchronous le liphetoho
Mekhoa eohle ea API ha e- synchronous 'me e qala phetoho . Ba khutlela ho motho ea letselitseng hang ha phetoho e qala empa pele e fela . Ho feta moo, mohala oa mokhoa ho karolo ea phetoho o tla hlokomolohuoa .
Sheba litokomane tsa rona tsa JavaScript bakeng sa lintlha tse ling .
.carousel(options)
E qala carousel ka khetho ea boikhethelo object
ebe e qala ho palama lintho.
.carousel('cycle')
E potoloha ka har'a lintho tsa carousel ho tloha ho le letšehali ho ea ho le letona.
.carousel('pause')
E emisa carousel ho palama baesekele ka har'a lintho.
.carousel(number)
E potoloha carousel ho foreime e itseng (0 e thehiloeng, e ts'oanang le lethathamo). E khutlela ho motho ea letselitseng pele ntho e lebisitsoeng e bontšoa (ke hore pele slid.bs.carousel
ketsahalo e etsahala).
.carousel('prev')
Lipotoloho ho ea nthong e fetileng. E khutlela ho moletsi pele ntho e fetileng e bontšoa (ke hore pele slid.bs.carousel
ketsahalo e etsahala).
.carousel('next')
Lipotoloho ho ea nthong e latelang. E kgutlela ho moletsi pele ntho e latelang e bontshwa (ke hore pele slid.bs.carousel
ketsahalo e etsahala).
.carousel('dispose')
E senya carousel ea element.
.carousel('nextWhenVisible')
Se ke oa potoloha carousel ho ea ho e latelang ha leqephe le sa bonahale kapa carousel kapa motsoali oa eona a sa bonahale. E kgutlela ho moletsi pele ntho e latelang e bontshwa (ke hore pele slid.bs.carousel
ketsahalo e etsahala).
.carousel('to')
E potoloha carousel ho foreime e itseng (0 e thehiloeng, e ts'oanang le lethathamo). E kgutlela ho moletsi pele ntho e latelang e bontshwa (ke hore pele slid.bs.carousel
ketsahalo e etsahala).
Liketsahalo
Sehlopha sa carousel sa Bootstrap se pepesa liketsahalo tse peli tsa ho hokahana le ts'ebetso ea carousel. Liketsahalo tsena ka bobeli li na le litšobotsi tse latelang:
direction
: Tsela eo carousel e thellang ho eona (ebang ke"left"
kapa"right"
).relatedTarget
: Karolo ea DOM e ntseng e theoleloa sebakeng e le eona ntho e sebetsang.from
: Lenane la ntho ea hajoaleto
: Lenane la ntho e latelang
Liketsahalo tsohle tsa carousel li thunngoa ho carousel ka boeona (ke hore ho <div class="carousel">
).
Mofuta oa Ketsahalo | Tlhaloso |
---|---|
slide.bs.carousel | Ketsahalo ena e tuka hang hang ha slide mokhoa oa mohlala o sebelisoa. |
slid.bs.carousel | Ketsahalo ena e thunngoa ha carousel e phethela phetoho ea eona ea li-slide. |
Fetola nako ea phetoho
Nako ea phetoho e .carousel-item
ka fetoloa ka mofuta oa $carousel-transition
Sass pele o hlophisa kapa mekhoa ea tloaelo haeba o sebelisa CSS e hlophisitsoeng. Haeba ho sebelisoa liphetoho tse ngata, etsa bonnete ba hore phetoho ea phetoho e hlalosoa pele (mohlala. transition: transform 2s ease, opacity .5s ease-out
).