کاروسل
د عناصرو له لارې د سایکل چلولو لپاره د سلایډ شو اجزا — عکسونه یا د متن سلایډ — لکه کیروسل.
څنګه کار کوي
کیروسل د یو لړ مینځپانګو له لارې د سایکل چلولو لپاره یو سلایډ شو دی چې د CSS 3D بدلونونو او یو څه جاواسکریپټ سره جوړ شوی. دا د عکسونو، متن، یا دودیز مارک اپ لړۍ سره کار کوي. پدې کې د تیرو / راتلونکو کنټرولونو او شاخصونو ملاتړ هم شامل دی.
په براوزرونو کې چیرې چې د پاڼې لید API ملاتړ کیږي، کاروسیل به د سلیډ کولو څخه مخنیوی وکړي کله چې ویب پاڼه کارونکي ته نه لیدل کیږي (لکه کله چې د براوزر ټب غیر فعال وي، د براوزر کړکۍ کوچنۍ وي، او داسې نور).
prefers-reduced-motion
رسنیو په پوښتنو پورې اړه لري. زموږ د لاسرسي اسنادو کم شوي حرکت برخه وګورئ
.
مهرباني وکړئ په یاد ولرئ چې نیست شوي carousels نه ملاتړ کیږي، او carousels عموما د لاسرسي معیارونو سره مطابقت نلري.
په نهایت کې، که تاسو زموږ جاواسکریپټ د سرچینې څخه جوړ کړئ، دا اړتیا لريutil.js
.
بېلګه
Carousels په اوتومات ډول د سلایډ ابعاد نورمال نه کوي. د دې په څیر، تاسو اړتیا لرئ چې د محتوياتو مناسب اندازې لپاره اضافي اسانتیاوې یا دودیز سټایلونه وکاروئ. پداسې حال کې چې carousels د پخوانیو/راتلونکو کنټرولونو او شاخصونو ملاتړ کوي، دوی په ښکاره ډول اړین ندي. اضافه او تنظیم کړئ لکه څنګه چې تاسو مناسب ګورئ.
ټولګي باید په .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>
د شاخصونو سره
تاسو کولی شئ شاخصونه هم د کنټرول تر څنګ په carousel کې اضافه کړئ.
<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
وقفه
A ته اضافه کړئ data-interval=""
ترڅو .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"
، نو تاسو باید دا پخپله پیل کړئ. دا د ورته کاروسیل د (بې ځایه او غیر ضروري) واضح جاواسکریپټ ابتکار سره په ترکیب کې نشي کارول کیدی.
د جاواسکریپټ له لارې
carousel په لاسي ډول سره زنګ ووهئ:
$('.carousel').carousel()
اختیارونه
اختیارونه د ډیټا ځانګړتیاو یا جاواسکریپټ له لارې لیږدول کیدی شي. د ډیټا ځانګړتیاو لپاره، د اختیار نوم سره ضمیمه کړئ data-
، لکه څنګه چې په کې data-interval=""
.
نوم | ډول | ډیفالټ | تفصیل |
---|---|---|---|
وقفه | شمیره | 5000 | د یو توکي په اتوماتيک ډول سایکل چلولو تر منځ د ځنډولو وخت. که false ، carousel به په اتوماتيک ډول سایکل نه ګرځي. |
کیبورډ | بولین | ریښتیا | آیا کاروسیل باید د کیبورډ پیښو ته عکس العمل ښکاره کړي. |
وقفه | تار | بولین | 'هور' | که ټاکل شوی وي په ټچ فعال شوي وسیلو کې، کله چې ټاکل شوي وي |
سواری | تار | دروغ | کاروسل په اتوماتيک ډول پلی کوي وروسته له دې چې کارونکي په لاسي ډول لومړی توکي سایکل کوي. که ټاکل شوی وي 'carousel' ، کاروسل په بار کې په اتوماتيک ډول پلی کوي. |
لپاسه | بولین | ریښتیا | آیا کاروسیل باید په دوامداره توګه سایکل وکړي یا سخت تمځایونه ولري. |
لمس | بولین | ریښتیا | آیا کاروسیل باید په ټچ سکرین وسیلو کې کیڼ / ښیې سویپ تعاملاتو ملاتړ وکړي. |
میتودونه
غیر متناسب میتودونه او لیږدونه
ټولې API میتودونه غیر متزلزل دي او لیږد پیل کوي . کله چې لیږد پیل شي دوی بیرته زنګ وهونکي ته بیرته راځي مګر مخکې له دې چې پای ته ورسیږي . برسېره پردې، د لیږدونکي برخې په اړه د میتود غوښتنې به له پامه غورځول شي .
.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
پیښه پیښ شي).
پیښې
د بوټسټریپ کیروسیل ټولګي د کیروسل فعالیت کې د ځړولو لپاره دوه پیښې افشا کوي. دواړه پیښې لاندې اضافي ځانګړتیاوې لري:
direction
: هغه لوري چې کیروسل په کې تیریږي (یا"left"
یا"right"
).relatedTarget
: د DOM عنصر چې د فعال توکي په توګه ځای پرځای شوی.from
: د اوسني توکي شاخصto
: د راتلونکي توکي شاخص
د carousel ټولې پیښې پخپله په carousel کې ډزې کیږي (یعنې په <div class="carousel">
).
د پیښې ډول | تفصیل |
---|---|
slide.bs.carousel | دا پیښه سمدلاسه اوریږي کله چې د slide مثال میتود غوښتنه کیږي. |
slid.bs.carousel | دا پیښه له مینځه وړل کیږي کله چې کیروسل خپل سلایډ لیږد بشپړ کړی وي. |
$('#myCarousel').on('slide.bs.carousel', function () {
// do something...
})
د لیږد موده بدل کړئ
د لیږد موده د تالیف کولو یا دودیز سټایلونو دمخه .carousel-item
د Sass متغیر سره بدل کیدی شي $carousel-transition
که تاسو تالیف شوی CSS کاروئ. که ډیری لیږدونه پلي شي، ډاډ ترلاسه کړئ چې د لیږد لیږد لومړی تعریف شوی (د مثال په توګه transition: transform 2s ease, opacity .5s ease-out
).