Carousel
ئېلېمېنتلار ئارقىلىق ۋېلىسىپىت مىنىشنىڭ تام تەسۋىر زاپچاسلىرى - رەسىم ياكى تېكىست تام تەسۋىرلىرى كارۇسېلغا ئوخشاش.
قانداق ئىشلەيدۇ
كارۇسېل بىر يۈرۈش مەزمۇنلار ئارقىلىق ۋېلىسىپىت مىنىشنىڭ تام تەسۋىرى بولۇپ ، CSS 3D ئۆزگەرتىش ۋە بىر ئاز JavaScript بىلەن ياسالغان. ئۇ بىر يۈرۈش رەسىم ، تېكىست ياكى ئىختىيارى بەلگە بىلەن ئىشلەيدۇ. ئۇ ئىلگىرىكى / كېيىنكى كونترول ۋە كۆرسەتكۈچلەرنى قوللاشنىمۇ ئۆز ئىچىگە ئالىدۇ.
Page Visibility API قوللايدىغان توركۆرگۈچلەردە ، تور بەت ئىشلەتكۈچىگە كۆرۈنمىگەندە كارۇسېل سىيرىلىپ كېتىشتىن ساقلىنىدۇ (مەسىلەن توركۆرگۈچ بەتكۈچى ئاكتىپلانمىغان ۋاقىتتا ، توركۆرگۈچ كۆزنىكى كىچىكلىتىلىدۇ).
prefers-reduced-motion
مېدىيا سوئالىغا باغلىق. قولايلىق ھۆججەتلىرىمىزنىڭ قىسقارتىلغان ھەرىكەت بۆلىكىنى كۆرۈڭ
.
شۇنىڭغا دىققەت قىلىڭكى ، ئۇۋىسى كارۇسېلنى قوللىمايدۇ ، كارۇسېل ئادەتتە ئىشلىتىش ئۆلچىمىگە ماس كەلمەيدۇ.
ئاخىرىدا ، ئەگەر سىز JavaScript نى مەنبەدىن قۇرغان بولسىڭىز ، ئۇ تەلەپ قىلىدۇutil.js
.
مىسال
كارۇسېل تام تەسۋىرنى ئاپتوماتىك نورماللاشتۇرمايدۇ. بۇنداق بولغاندا ، مەزمۇننى مۇۋاپىق چوڭايتىش ئۈچۈن قوشۇمچە ئىقتىدار ياكى ئىختىيارى ئۇسلۇبلارنى ئىشلىتىشىڭىز مۇمكىن. كارۇسېل ئالدىنقى / كېيىنكى كونترول ۋە كۆرسەتكۈچلەرنى قوللىسىمۇ ، ئېنىق تەلەپ قىلىنمايدۇ. ئۆزىڭىز خالىغانچە قوشۇڭ ۋە خاسلاشتۇرۇڭ.
سىنىپنى بىر تام .active
تەسۋىرگە قوشۇش كېرەك ، بولمىسا كارۇسېل كۆرۈنمەيدۇ. id
ئىختىيارى كونترول قىلىش ئۈچۈن ئۆزگىچە بەلگىلەشكە كاپالەتلىك قىلىڭ .carousel
، بولۇپمۇ بىر بەتتە كۆپ كارۇسېل ئىشلىتىۋاتقان بولسىڭىز. كونترول ۋە كۆرسەتكۈچ ئېلېمېنتلىرىنىڭ ئېلېمېنتقا ماس كېلىدىغان خاسلىقى data-target
(ياكى href
ئۇلىنىش ئۈچۈن) بولۇشى كېرەك .id
.carousel
پەقەت تام تەسۋىر
بۇ يەردە پەقەت تام تەسۋىر بار كارۇسېل بار. .d-block
ۋە كارۇسېل رەسىملىرىنىڭ بارلىقىغا دىققەت قىلىڭ ، .w-100
توركۆرگۈنىڭ سۈكۈتتىكى رەسىمنىڭ توغرىلىنىشىنىڭ ئالدىنى ئالىدۇ.
<div id="carouselExampleSlidesOnly" class="carousel slide" data-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-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-target="#carouselExampleControls" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleControls" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</div>
كۆرسەتكۈچ بىلەن
كارۇسېلغا كۆرسەتكۈچلەرنى كونترول قىلىش بىلەن بىللە قوشالايسىز.
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<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-target="#carouselExampleIndicators" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleIndicators" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</div>
ئىزاھلار بىلەن
.carousel-caption
تام تەسۋىرگە ھەر قانداق ئېلېمېنت بىلەن ئاسانلا خەت قوشۇڭ .carousel-item
. ئىختىيارىي كۆرسىتىش قوراللىرى بىلەن تۆۋەندە كۆرسىتىلگەندەك كىچىك كۆرۈنۈشلەرگە ئاسانلا يوشۇرۇنغىلى بولىدۇ . بىز دەسلەپتە ئۇلارنى يوشۇرۇپ .d-none
، ئوتتۇرا تىپتىكى ئۈسكۈنىلەرگە قايتۇرۇپ كېلىمىز .d-md-block
.
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
</ol>
<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-target="#carouselExampleCaptions" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleCaptions" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</div>
Crossfade
كاروسېلغا .carousel-fade
تام تەسۋىرنىڭ ئورنىغا سۇس ئۆتكۈنچى ھالەتتە جانلاندۇرۇڭ. كارۇسېل مەزمۇنىغا ئاساسەن (مەسىلەن ، تېكىست پەقەت تام تەسۋىر) ، مۇۋاپىق ھالقىش ئۈچۈن s غا .bg-body
بەزى خاس CSS نى قوشسىڭىز بولىدۇ..carousel-item
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-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-target="#carouselExampleFade" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleFade" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</div>
يەككە .carousel-item
ئارىلىق
ئاپتوماتىك ۋېلىسىپىت مىنىشنىڭ كېيىنكى تۈرگە كېچىكتۈرۈش ۋاقتىنى ئۆزگەرتىش data-interval=""
ئۈچۈن a غا قوشۇڭ ..carousel-item
<div id="carouselExampleInterval" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active" data-interval="10000">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item" data-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-target="#carouselExampleInterval" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleInterval" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</div>
چەكمە سۈرتۈشنى چەكلەڭ
كارۇسېل سېزىمچان ئېكراندا سول ياكى ئوڭغا سىيرىلىشنى قوللايدۇ. بۇ data-touch
خاسلىقنى ئىشلىتىپ چەكلەشكە بولىدۇ. تۆۋەندىكى مىسالمۇ data-ride
خاسلىقنى ئۆز ئىچىگە ئالمايدۇ ، data-interval="false"
شۇڭا ئۇنى ئاپتوماتىك قويمايدۇ.
<div id="carouselExampleControlsNoTouching" class="carousel slide" data-touch="false" data-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-target="#carouselExampleControlsNoTouching" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleControlsNoTouching" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</div>
ئىشلىتىش
سانلىق مەلۇمات خاسلىقى ئارقىلىق
سانلىق مەلۇمات خاسلىقىنى ئىشلىتىپ كارۇسېلنىڭ ئورنىنى ئاسانلا كونترول قىلىڭ. data-slide
ئاچقۇچلۇق سۆزلەرنى قوبۇل قىلىدۇ prev
ياكى next
تام تەسۋىر ئورنىنى ھازىرقى ئورنىغا ئۆزگەرتىدۇ. ئۇنىڭدىن باشقا ، data-slide-to
خام تام تەسۋىر كۆرسەتكۈچىنى كارۇسېلغا يەتكۈزۈش ئۈچۈن ئىشلىتىڭ data-slide-to="2"
، بۇ تام تەسۋىر ئورنىنى باشلىنىشتىن باشلاپ مەلۇم كۆرسەتكۈچكە يۆتكەيدۇ 0
.
بۇ data-ride="carousel"
خاسلىق كارۇسېلنى بەت يۈكىدىن باشلاپ جانلاندۇرۇش دەپ بەلگە قىلىشقا ئىشلىتىلىدۇ. data-ride="carousel"
ئەگەر كارولىڭىزنى دەسلەپكى قەدەمدە ئىشلەتمىسىڭىز ، ئۇنى ئۆزىڭىز باشلىشىڭىز كېرەك. ئۇنى ئوخشاش كارۇسېلنىڭ (ئارتۇقچە ۋە زۆرۈر بولمىغان) ئېنىق JavaScript دەسلەپكى قەدەمدە بىرلەشتۈرۈپ ئىشلىتىشكە بولمايدۇ.
JavaScript ئارقىلىق
كارۇسېل بىلەن قولدا تېلېفون قىلىڭ:
$('.carousel').carousel()
تاللانما
تاللانمىلارنى سانلىق مەلۇمات خاسلىقى ياكى JavaScript ئارقىلىق يەتكۈزگىلى بولىدۇ. سانلىق مەلۇمات خاسلىقى ئۈچۈن ، تاللاش نامىغا data-
ئوخشاش data-interval=""
.
ئىسمى | تىپ | سۈكۈتتىكى | چۈشەندۈرۈش |
---|---|---|---|
ئارىلىق | سان | 5000 | بىر نەرسىنى ئاپتوماتىك ۋېلىسىپىت مىنىشنىڭ كېچىكىش ۋاقتى. ئەگەر false ، كارۇسېل ئاپتوماتىك ئايلىنالمايدۇ. |
كۇنۇپكا تاختىسى | boolean | true | كارۇسېل كۇنۇپكا تاختىسىدىكى ھادىسىلەرگە ئىنكاس قايتۇرامدۇ يوق. |
توختاپ | string | boolean | 'hover' | تەڭشەلسە سېزىمچان ئۈسكۈنىلەردە تەڭشەلگەندە |
ride | string | false | ئىشلەتكۈچى بىرىنچى تۈرنى قولدا ئايلاندۇرغاندىن كېيىن كارۇسېلنى ئاپتوماتىك كۆرسىتىدۇ. تەڭشەلگەن بولسا 'carousel' ، كارۇسېلنى يۈككە ئاپتوماتىك ھەيدەيدۇ. |
wrap | boolean | true | كارۇسېل ئۇدا ئايلىنىشى كېرەكمۇ ياكى قاتتىق توختاپ قېلىش كېرەكمۇ. |
touch | boolean | true | كارۇسېل سېزىمچان ئېكرانلىق ئۈسكۈنىلەردە سول / ئوڭ سۈرتۈش ئۆز-ئارا تەسىر كۆرسىتىشنى قوللامدۇ يوق. |
Methods
ماس قەدەمسىز ئۇسۇل ۋە ئۆتكۈنچى
بارلىق API ئۇسۇللىرى ماس قەدەمسىز بولۇپ ، ئۆتكۈنچى باسقۇچنى باشلايدۇ . ئۇلار بۇرۇلۇش باشلانغان ھامان ، ئۇ ئاخىرلاشماي تۇرۇپلا تېلېفون قىلغۇچىغا قايتىپ كېلىدۇ . بۇنىڭدىن باشقا ، ئۆتكۈنچى زاپچاسنى چاقىرىش ئۇسۇلىغا سەل قارىلىدۇ .
تېخىمۇ كۆپ ئۇچۇرغا ئېرىشىش ئۈچۈن JavaScript ھۆججىتىمىزنى كۆرۈڭ .
.carousel(options)
كارۇسېلنى ئىختىيارى تاللاش object
بىلەن باشلايدۇ ۋە تۈرلەر ئارقىلىق ۋېلىسىپىت مىنىشكە باشلايدۇ.
$('.carousel').carousel({
interval: 2000
})
.carousel('cycle')
سولدىن ئوڭغا كارۇسېل بۇيۇملىرى ئارقىلىق ۋېلىسىپىت.
.carousel('pause')
كارۇسېلنى بۇيۇملار ئارقىلىق ۋېلىسىپىت مىنىشتىن توختىتىدۇ.
.carousel(number)
كارۇسېلنى مەلۇم بىر رامكىغا ئايلاندۇرىدۇ (0 ئاساس قىلىنغان ، سانلار گۇرپىسىغا ئوخشايدۇ). نىشان تۈرى كۆرسىتىلىشتىن بۇرۇن (يەنى ۋەقە يۈز بېرىشتىن بۇرۇن) دەۋەتچىگە قايتىدۇ .slid.bs.carousel
.carousel('prev')
ئالدىنقى تۈرگە ئايلىنىش. ئالدىنقى تۈر كۆرسىتىلىشتىن بۇرۇن (يەنى ۋەقە يۈز بېرىشتىن بۇرۇن) دەۋەتچىگە قايتىدۇ .slid.bs.carousel
.carousel('next')
كېيىنكى تۈرگە ئايلىنىش. كېيىنكى تۈر كۆرسىتىلىشتىن بۇرۇن (يەنى ۋەقە يۈز بېرىشتىن بۇرۇن) دەۋەتچىگە قايتىدۇ .slid.bs.carousel
.carousel('dispose')
بىر ئېلېمېنتنىڭ كارۇسېلنى بۇزىدۇ.
.carousel('nextWhenVisible')
بەت كۆرۈنمىسە ياكى كارۇسېل ياكى ئۇنىڭ ئاتا-ئانىسى كۆرۈنمىگەندە كارۇسېلنى كېيىنكى ئورۇنغا ئايلاندۇرماڭ. كېيىنكى تۈر كۆرسىتىلىشتىن بۇرۇن (يەنى ۋەقە يۈز بېرىشتىن بۇرۇن) دەۋەتچىگە قايتىدۇ .slid.bs.carousel
.carousel('to')
كارۇسېلنى مەلۇم بىر رامكىغا ئايلاندۇرىدۇ (0 ئاساس قىلىنغان ، سانلار گۇرپىسىغا ئوخشايدۇ). كېيىنكى تۈر كۆرسىتىلىشتىن بۇرۇن (يەنى ۋەقە يۈز بېرىشتىن بۇرۇن) دەۋەتچىگە قايتىدۇ .slid.bs.carousel
Events
Bootstrap نىڭ كارۇسېل سىنىپى كارۇسېل ئىقتىدارىغا باغلانغان ئىككى خىل ھادىسىنى ئاشكارىلىدى. ھەر ئىككى ھادىسىنىڭ تۆۋەندىكى قوشۇمچە خۇسۇسىيەتلىرى بار:
direction
: كارۇسېلنىڭ سىيرىلىش يۆنىلىشى (ياكى"left"
ياكى"right"
).relatedTarget
: ئاكتىپ تۈر سۈپىتىدە جايىغا سىيرىلىۋاتقان DOM ئېلېمېنتى.from
: نۆۋەتتىكى تۈرنىڭ كۆرسەتكۈچىto
: كېيىنكى تۈرنىڭ كۆرسەتكۈچى
بارلىق كارۇسېل ھادىسىلىرى كارۇسېلنىڭ ئۆزىگە قارىتىلغان (يەنى <div class="carousel">
).
پائالىيەت تىپى | چۈشەندۈرۈش |
---|---|
slide.bs.carousel | slide مىسال ئۇسۇلى قوللىنىلغاندا بۇ ھادىسە دەرھال ئېتىلىدۇ. |
slid.bs.carousel | كارۇسېل سىيرىلما ئۆتۈشنى تاماملىغاندا بۇ پائالىيەت ئېتىلىدۇ. |
$('#myCarousel').on('slide.bs.carousel', function () {
// do something...
})
ئۆتكۈنچى مۇددىتىنى ئۆزگەرتىش
ئەگەر سىز تۈزۈلگەن CSS نى ئىشلىتىۋاتقان بولسىڭىز ، Sass ئۆزگەرگۈچى مىقدارنى .carousel-item
ئۆزگەرتىشتىن بۇرۇن ياكى خاس ئۇسلۇبنى ئۆزگەرتىشكە بولىدۇ . $carousel-transition
ئەگەر كۆپ خىل ئۆتكۈنچى قوللىنىلسا ، ئالدى بىلەن ئۆزگەرتىشنىڭ ئېنىقلانغانلىقىنى جەزملەشتۈرۈڭ (مەسىلەن transition: transform 2s ease, opacity .5s ease-out
).