Carousel
ئېلېمېنتلار ئارقىلىق ۋېلىسىپىت مىنىشنىڭ تام تەسۋىر زاپچاسلىرى - رەسىم ياكى تېكىست تام تەسۋىرلىرى كارۇسېلغا ئوخشاش.
قانداق ئىشلەيدۇ
كارۇسېل ۋېلىسىپىت مىنىشنىڭ بىر يۈرۈش مەزمۇنلىرى بولۇپ ، CSS 3D ئۆزگەرتىش ۋە بىر ئاز JavaScript بىلەن ياسالغان. ئۇ بىر يۈرۈش رەسىم ، تېكىست ياكى ئىختىيارى بەلگە بىلەن ئىشلەيدۇ. ئۇ يەنە ئىلگىرىكى / كېيىنكى كونترول ۋە كۆرسەتكۈچلەرنى قوللاشنى ئۆز ئىچىگە ئالىدۇ.
Page Visibility API قوللايدىغان توركۆرگۈچلەردە ، تور بەت ئىشلەتكۈچىگە كۆرۈنمىگەندە كارۇسېل سىيرىلىپ كېتىشتىن ساقلىنىدۇ (مەسىلەن توركۆرگۈچ بەتكۈچى ئاكتىپلانمىغان ۋاقىتتا ، توركۆرگۈچ كۆزنىكى كىچىكلىتىلىدۇ).
prefers-reduced-motion
مېدىيا سوئالىغا باغلىق. قولايلىق ھۆججەتلىرىمىزنىڭ قىسقارتىلغان ھەرىكەت بۆلىكىنى كۆرۈڭ
.
شۇنىڭغا دىققەت قىلىڭكى ، ئۇۋىسى كارۇسېلنى قوللىمايدۇ ، كارۇسېل ئادەتتە ئىشلىتىش ئۆلچىمىگە ماس كەلمەيدۇ.
مىسال
كارۇسېل تام تەسۋىرنى ئاپتوماتىك نورماللاشتۇرمايدۇ. بۇنداق بولغاندا ، مەزمۇننى مۇۋاپىق چوڭايتىش ئۈچۈن قوشۇمچە ئىقتىدار ياكى ئىختىيارى ئۇسلۇبلارنى ئىشلىتىشىڭىز مۇمكىن. كارۇسېل ئالدىنقى / كېيىنكى كونترول ۋە كۆرسەتكۈچلەرنى قوللىسىمۇ ، ئېنىق تەلەپ قىلىنمايدۇ. ئۆزىڭىز خالىغانچە قوشۇڭ ۋە خاسلاشتۇرۇڭ.
سىنىپنى بىر تام .active
تەسۋىرگە قوشۇش كېرەك ، بولمىسا كارۇسېل كۆرۈنمەيدۇ. id
ئىختىيارى كونترول قىلىش ئۈچۈن ئۆزگىچە بەلگىلەشكە كاپالەتلىك قىلىڭ .carousel
، بولۇپمۇ بىر بەتتە كۆپ كارۇسېل ئىشلىتىۋاتقان بولسىڭىز. كونترول ۋە كۆرسەتكۈچ ئېلېمېنتلىرىنىڭ ئېلېمېنتقا ماس كېلىدىغان خاسلىقى data-bs-target
(ياكى href
ئۇلىنىش ئۈچۈن) بولۇشى كېرەك .id
.carousel
پەقەت تام تەسۋىر
بۇ يەردە پەقەت تام تەسۋىر بار كارۇسېل بار. .d-block
ۋە كارۇسېل رەسىملىرىنىڭ بارلىقىغا دىققەت قىلىڭ ، .w-100
توركۆرگۈنىڭ سۈكۈتتىكى رەسىمنىڭ توغرىلىنىشىنىڭ ئالدىنى ئالىدۇ.
<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
</div>
كونترول بىلەن
ئالدىنقى ۋە كېيىنكى كونتروللارغا قوشۇش. ئېلېمېنتلارنى ئىشلىتىشنى تەۋسىيە قىلىمىز ، ئەمما سىز ئېلېمېنتلارنى <button>
ئىشلەتسىڭىزمۇ بولىدۇ .<a>
role="button"
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
كۆرسەتكۈچ بىلەن
كارۇسېلغا كۆرسەتكۈچلەرنى كونترول قىلىش بىلەن بىللە قوشالايسىز.
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
ئىزاھلار بىلەن
.carousel-caption
تام تەسۋىرگە خالىغان مەزمۇننى ئاسانلا قوشۇڭ .carousel-item
. ئىختىيارىي كۆرسىتىش قوراللىرى بىلەن تۆۋەندە كۆرسىتىلگەندەك كىچىك كۆرۈنۈشلەرگە ئاسانلا يوشۇرۇنغىلى بولىدۇ . بىز دەسلەپتە ئۇلارنى يوشۇرۇپ .d-none
، ئوتتۇرا تىپتىكى ئۈسكۈنىلەرگە قايتۇرىمىز .d-md-block
.
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Some representative placeholder content for the second slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
Crossfade
كاروسېلغا .carousel-fade
تام تەسۋىرنىڭ ئورنىغا سۇس ئۆتكۈنچى ھالەتتە جانلاندۇرۇڭ.
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
يەككە .carousel-item
ئارىلىق
ئاپتوماتىك ۋېلىسىپىت مىنىشنىڭ كېيىنكى تۈرگە كېچىكتۈرۈش ۋاقتىنى ئۆزگەرتىش data-bs-interval=""
ئۈچۈن a غا قوشۇڭ ..carousel-item
<div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active" data-bs-interval="10000">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item" data-bs-interval="2000">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
چەكمە سۈرتۈشنى چەكلەڭ
كارۇسېل سېزىمچان ئېكراندا سول ياكى ئوڭغا سىيرىلىشنى قوللايدۇ. بۇ data-bs-touch
خاسلىقنى ئىشلىتىپ چەكلەشكە بولىدۇ. تۆۋەندىكى مىسالمۇ data-bs-ride
خاسلىقنى ئۆز ئىچىگە ئالمايدۇ ، data-bs-interval="false"
شۇڭا ئۇنى ئاپتوماتىك قويمايدۇ.
<div id="carouselExampleControlsNoTouching" class="carousel slide" data-bs-touch="false" data-bs-interval="false">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControlsNoTouching" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControlsNoTouching" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
قاراڭغۇ ۋارىيانت
قاراڭغۇ كونترول .carousel-dark
، .carousel
كۆرسەتكۈچ ۋە ئىزاھلارغا قاراڭ. كونتروللار سۈكۈتتىكى ئاق تولدۇرۇشتىن filter
CSS خاسلىقى بىلەن ئۆزگەرتىلدى. color
ئىزاھ ۋە كونتروللارنىڭ قوشۇمچە Sass ئۆزگەرگۈچى مىقدارلىرى بار background-color
.
<div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active" data-bs-interval="10000">
<img src="..." class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
<div class="carousel-item" data-bs-interval="2000">
<img src="..." class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Some representative placeholder content for the second slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
Custom transition
ئەگەر سىز تۈزۈلگەن CSS نى ئىشلىتىۋاتقان بولسىڭىز ، Sass ئۆزگەرگۈچى مىقدارنى .carousel-item
ئۆزگەرتىشتىن بۇرۇن ياكى خاس ئۇسلۇبنى ئۆزگەرتىشكە بولىدۇ . $carousel-transition-duration
ئەگەر كۆپ خىل ئۆتكۈنچى قوللىنىلسا ، ئالدى بىلەن ئۆزگەرتىشنىڭ ئېنىقلانغانلىقىنى جەزملەشتۈرۈڭ (مەسىلەن transition: transform 2s ease, opacity .5s ease-out
).
Sass
ئۆزگەرگۈچى مىقدار
$carousel-control-color: $white;
$carousel-control-width: 15%;
$carousel-control-opacity: .5;
$carousel-control-hover-opacity: .9;
$carousel-control-transition: opacity .15s ease;
$carousel-indicator-width: 30px;
$carousel-indicator-height: 3px;
$carousel-indicator-hit-area-height: 10px;
$carousel-indicator-spacer: 3px;
$carousel-indicator-opacity: .5;
$carousel-indicator-active-bg: $white;
$carousel-indicator-active-opacity: 1;
$carousel-indicator-transition: opacity .6s ease;
$carousel-caption-width: 70%;
$carousel-caption-color: $white;
$carousel-caption-padding-y: 1.25rem;
$carousel-caption-spacer: 1.25rem;
$carousel-control-icon-width: 2rem;
$carousel-control-prev-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>");
$carousel-control-next-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>");
$carousel-transition-duration: .6s;
$carousel-transition: transform $carousel-transition-duration ease-in-out; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)
$carousel-dark-indicator-active-bg: $black;
$carousel-dark-caption-color: $black;
$carousel-dark-control-icon-filter: invert(1) grayscale(100);
ئىشلىتىش
سانلىق مەلۇمات خاسلىقى ئارقىلىق
سانلىق مەلۇمات خاسلىقىنى ئىشلىتىپ كارۇسېلنىڭ ئورنىنى ئاسانلا كونترول قىلىڭ. data-bs-slide
ئاچقۇچلۇق سۆزلەرنى قوبۇل قىلىدۇ prev
ياكى next
تام تەسۋىر ئورنىنى ھازىرقى ئورنىغا ئۆزگەرتىدۇ. ئۇنىڭدىن باشقا ، data-bs-slide-to
خام تام تەسۋىر كۆرسەتكۈچىنى كارۇسېلغا يەتكۈزۈش ئۈچۈن ئىشلىتىڭ data-bs-slide-to="2"
، بۇ تام تەسۋىر ئورنىنى باشلىنىشتىن باشلاپ مەلۇم كۆرسەتكۈچكە يۆتكەيدۇ 0
.
بۇ data-bs-ride="carousel"
خاسلىق كارۇسېلنى بەت يۈكىدىن باشلاپ جانلاندۇرۇش دەپ بەلگە قىلىشقا ئىشلىتىلىدۇ. data-bs-ride="carousel"
ئەگەر كارولىڭىزنى دەسلەپكى قەدەمدە ئىشلەتمىسىڭىز ، ئۇنى ئۆزىڭىز باشلىشىڭىز كېرەك. ئۇنى ئوخشاش كارۇسېلنىڭ (ئارتۇقچە ۋە ھاجەتسىز) ئېنىق JavaScript دەسلەپكى قەدەمدە بىرلەشتۈرۈپ ئىشلىتىشكە بولمايدۇ.
JavaScript ئارقىلىق
كارۇسېل بىلەن قولدا تېلېفون قىلىڭ:
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel)
تاللانما
تاللانمىلارنى سانلىق مەلۇمات خاسلىقى ياكى JavaScript ئارقىلىق يەتكۈزگىلى بولىدۇ. سانلىق مەلۇمات خاسلىقى ئۈچۈن ، تاللاش نامىغا data-bs-
ئوخشاش data-bs-interval=""
.
ئىسمى | تىپ | سۈكۈتتىكى | چۈشەندۈرۈش |
---|---|---|---|
interval |
سان | 5000 |
بىر نەرسىنى ئاپتوماتىك ۋېلىسىپىت مىنىشنىڭ كېچىكىش ۋاقتى. ئەگەر false ، كارۇسېل ئاپتوماتىك ئايلىنالمايدۇ. |
keyboard |
boolean | true |
كارۇسېل كۇنۇپكا تاختىسىدىكى ھادىسىلەرگە ئىنكاس قايتۇرامدۇ يوق. |
pause |
string | boolean | 'hover' |
تەڭشەلسە سېزىمچان ئۈسكۈنىلەردە تەڭشەلگەندە |
ride |
string | boolean | false |
ئىشلەتكۈچى بىرىنچى تۈرنى قولدا ئايلاندۇرغاندىن كېيىن كارۇسېلنى ئاپتوماتىك كۆرسىتىدۇ. تەڭشەلگەن بولسا 'carousel' ، كارۇسېلنى يۈككە ئاپتوماتىك ھەيدەيدۇ. |
wrap |
boolean | true |
كارۇسېل ئۇدا ئايلىنىشى كېرەكمۇ ياكى قاتتىق توختاپ قېلىش كېرەكمۇ. |
touch |
boolean | true |
كارۇسېل سېزىمچان ئېكران ئۈسكۈنىلىرىدە سول / ئوڭ سۈرتۈش ئۆز-ئارا تەسىر كۆرسىتىشنى قوللامدۇ يوق. |
Methods
ماس قەدەمسىز ئۇسۇل ۋە ئۆتكۈنچى
بارلىق API ئۇسۇللىرى ماس قەدەمسىز بولۇپ ، ئۆتكۈنچى باسقۇچنى باشلايدۇ . ئۇلار بۇرۇلۇش باشلانغان ھامان ، ئۇ ئاخىرلاشماي تۇرۇپلا تېلېفون قىلغۇچىغا قايتىپ كېلىدۇ . بۇنىڭدىن باشقا ، ئۆتكۈنچى زاپچاسنى چاقىرىش ئۇسۇلىغا سەل قارىلىدۇ .
تېخىمۇ كۆپ ئۇچۇرغا ئېرىشىش ئۈچۈن JavaScript ھۆججىتىمىزنى كۆرۈڭ .
سىز كارۇسېل ياسىغۇچى بىلەن كارۇسېل مىسالى قۇرالايسىز ، مەسىلەن قوشۇمچە تاللاشلار بىلەن باشلاش ۋە تۈرلەر ئارقىلىق ۋېلىسىپىت مىنىشنى باشلاش:
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel, {
interval: 2000,
wrap: false
})
ئۇسۇل | چۈشەندۈرۈش |
---|---|
cycle |
سولدىن ئوڭغا كارۇسېل بۇيۇملىرى ئارقىلىق ۋېلىسىپىت. |
pause |
كارۇسېلنى بۇيۇملار ئارقىلىق ۋېلىسىپىت مىنىشتىن توختىتىدۇ. |
prev |
ئالدىنقى تۈرگە ئايلىنىش. ئالدىنقى تۈر كۆرسىتىلىشتىن بۇرۇن تېلېفون ئۇرغۇچىغا قايتىدۇ (مەسىلەن ، slid.bs.carousel ۋەقە يۈز بېرىشتىن بۇرۇن). |
next |
كېيىنكى تۈرگە ئايلىنىش. كېيىنكى تۈر كۆرسىتىلىشتىن بۇرۇن تېلېفون ئۇرغۇچىغا قايتىدۇ (مەسىلەن ، slid.bs.carousel ۋەقە يۈز بېرىشتىن بۇرۇن). |
nextWhenVisible |
بەت كۆرۈنمىسە ياكى كارۇسېل ياكى ئۇنىڭ ئاتا-ئانىسى كۆرۈنمىگەندە كارۇسېلنى كېيىنكى ئورۇنغا ئايلاندۇرماڭ. نىشان تۈرى كۆرسىتىلىشتىن بۇرۇن چاقىرغۇچىغا قايتىدۇ |
to |
كارۇسېلنى مەلۇم بىر رامكىغا ئايلاندۇرىدۇ (0 ئاساس قىلىنغان ، سانلار گۇرپىسىغا ئوخشايدۇ). نىشان تۈرى كۆرسىتىلىشتىن بۇرۇن چاقىرغۇچىغا قايتىدۇ (مەسىلەن ، slid.bs.carousel ۋەقە يۈز بېرىشتىن بۇرۇن). |
dispose |
بىر ئېلېمېنتنىڭ كارۇسېلنى بۇزىدۇ. (DOM ئېلېمېنتىدىكى ساقلانغان سانلىق مەلۇماتلارنى ئۆچۈرۈۋېتىدۇ) |
getInstance |
DOM ئېلېمېنتىغا باغلانغان كارۇسېل مىسالىغا ئېرىشىدىغان تۇراقلىق ئۇسۇل ، ئۇنى تۆۋەندىكىدەك ئىشلىتەلەيسىز:bootstrap.Carousel.getInstance(element) |
getOrCreateInstance |
DOM ئېلېمېنتىغا باغلانغان كارۇسېل مىسالىنى قايتۇرىدىغان ياكى باشلانمىغان ئەھۋال ئاستىدا يېڭىسىنى ھاسىل قىلىدىغان تۇراقلىق ئۇسۇل. ئۇنى تۆۋەندىكىدەك ئىشلىتەلەيسىز:bootstrap.Carousel.getOrCreateInstance(element) |
Events
Bootstrap نىڭ كارۇسېل سىنىپى كارۇسېل ئىقتىدارىغا باغلانغان ئىككى خىل ھادىسىنى ئاشكارىلىدى. ھەر ئىككى ھادىسىنىڭ تۆۋەندىكى قوشۇمچە خۇسۇسىيەتلىرى بار:
direction
: كارۇسېلنىڭ سىيرىلىش يۆنىلىشى (ياكى"left"
ياكى"right"
).relatedTarget
: ئاكتىپ تۈر سۈپىتىدە جايىغا سىيرىلىۋاتقان DOM ئېلېمېنتى.from
: نۆۋەتتىكى تۈرنىڭ كۆرسەتكۈچىto
: كېيىنكى تۈرنىڭ كۆرسەتكۈچى
بارلىق كارۇسېل ھادىسىلىرى كارۇسېلنىڭ ئۆزىگە قارىتىلغان (يەنى <div class="carousel">
).
پائالىيەت تىپى | چۈشەندۈرۈش |
---|---|
slide.bs.carousel |
slide مىسال ئۇسۇلى قوللىنىلغاندا دەرھال ئوت كېتىدۇ . |
slid.bs.carousel |
كارۇسېل تام تەسۋىرنى تاماملىغاندا ئوت كەتتى. |
var myCarousel = document.getElementById('myCarousel')
myCarousel.addEventListener('slide.bs.carousel', function () {
// do something...
})