کاروسل

د عناصرو له لارې د سایکل چلولو لپاره د سلایډ شو اجزا — عکسونه یا د متن سلایډ — لکه کیروسل.

څنګه کار کوي

کیروسل د یو لړ مینځپانګو له لارې د سایکل چلولو لپاره یو سلایډ شو دی چې د CSS 3D بدلونونو او یو څه جاواسکریپټ سره جوړ شوی. دا د عکسونو، متن، یا دودیز مارک اپ لړۍ سره کار کوي. پدې کې د تیرو / راتلونکو کنټرولونو او شاخصونو ملاتړ هم شامل دی.

په براوزرونو کې چیرې چې د پاڼې لید API ملاتړ کیږي، کاروسیل به د سلیډ کولو څخه مخنیوی وکړي کله چې ویب پاڼه کارونکي ته نه لیدل کیږي (لکه کله چې د براوزر ټب غیر فعال وي، د براوزر کړکۍ کوچنۍ وي، او داسې نور).

مهرباني وکړئ په یاد ولرئ چې نیست شوي carousels نه ملاتړ کیږي، او carousels عموما د لاسرسي معیارونو سره مطابقت نلري.

په نهایت کې، که تاسو زموږ جاواسکریپټ د سرچینې څخه جوړ کړئ، دا اړتیا لريutil.js .

بېلګه

Carousels په اوتومات ډول د سلایډ ابعاد نورمال نه کوي. د دې په څیر، تاسو اړتیا لرئ چې د محتوياتو مناسب اندازې لپاره اضافي اسانتیاوې یا دودیز سټایلونه وکاروئ. پداسې حال کې چې carousels د پخوانیو/راتلونکو کنټرولونو او شاخصونو ملاتړ کوي، دوی په ښکاره ډول اړین ندي. اضافه او تنظیم کړئ لکه څنګه چې تاسو مناسب ګورئ.

ټولګي باید په .activeیو سلایډ کې اضافه شي که نه نو کیروسل به نه لیدل کیږي. همدارنګه ډاډ ترلاسه کړئ چې .carouselد اختیاري کنټرولونو لپاره یو ځانګړی ID ترتیب کړئ، په ځانګړې توګه که تاسو په یوه پاڼه کې ډیری کیروسلونه کاروئ. د کنټرول او شاخص عناصر باید یو data-targetخاصیت ولري (یا د لینکونو لپاره) چې د عنصر hrefID سره سمون لري ..carousel

یوازې سلایډونه

دلته یوازې د سلایډونو سره کیروسل دی. .d-blockد براوزر د ډیفالټ عکس العمل مخه نیولو لپاره .w-100د کاروسیل عکسونو شتون یادونه وکړئ .

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
    </div>
  </div>
</div>

د کنټرولونو سره

په تیرو او راتلونکو کنټرولونو کې اضافه کول:

مخکینی بل

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</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 class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

د سرلیکونو سره

.carousel-captionپه اسانۍ سره په هر یو کې د عنصر سره خپلو سلایډونو ته سرلیکونه اضافه کړئ .carousel-item. دوی په اسانۍ سره په کوچني لید پورټونو کې پټ کیدی شي ، لکه څنګه چې لاندې ښودل شوي ، د اختیاري ښودنې اسانتیاو سره . موږ یې په پیل کې پټ کړو .d-noneاو د منځني اندازې وسیلو سره یې بیرته راوړو .d-md-block.

لومړی سلایډ لیبل

Nulla vitae elit libero, a pharetra augue mollis interdum.

دوهم سلایډ لیبل

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

دریم سلایډ لیبل

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

مخکینی بل

<div class="carousel-item">
  <img src="..." alt="...">
  <div class="carousel-caption d-none d-md-block">
    <h5>...</h5>
    <p>...</p>
  </div>
</div>

Crossfade

.carousel-fadeد سلایډ پر ځای د فیډ لیږد سره سلایډونو متحرک کولو لپاره خپل کاروسیل کې اضافه کړئ.

مخکینی بل

<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

کارول

د معلوماتو ځانګړتیاو له لارې

د کاروسیل موقعیت په اسانۍ سره کنټرولولو لپاره د معلوماتو ځانګړتیاوې وکاروئ. data-slideکلیدي کلمې مني prevیا next، کوم چې د اوسني موقعیت سره سم د سلایډ موقعیت بدلوي. په بدیل سره، کاروسل data-slide-toته د خام سلایډ شاخص لیږدولو لپاره وکاروئ data-slide-to="2"، کوم چې د سلایډ موقعیت یو ځانګړي شاخص ته لیږدوي چې پیل کیږي 0.

دا data-ride="carousel"خاصیت د کاروسیل په نښه کولو لپاره کارول کیږي لکه څنګه چې د مخ په بار کې پیل کیږي. دا د ورته کاروسیل د (بې ځایه او غیر ضروري) واضح جاواسکریپټ ابتکار سره په ترکیب کې نشي کارول کیدی.

د جاواسکریپټ له لارې

carousel په لاسي ډول سره زنګ ووهئ:

$('.carousel').carousel()

اختیارونه

اختیارونه د ډیټا ځانګړتیاو یا جاواسکریپټ له لارې لیږدول کیدی شي. د ډیټا ځانګړتیاو لپاره، د اختیار نوم سره ضمیمه کړئ data-، لکه څنګه چې په کې data-interval="".

میتودونه

.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')

د عنصر کیروسیل ویجاړوي.

پیښې

د بوټسټریپ کیروسیل ټولګي د کیروسل فعالیت کې د ځړولو لپاره دوه پیښې افشا کوي. دواړه پیښې لاندې اضافي ځانګړتیاوې لري:

• direction: هغه لوري چې کیروسل په کې تیریږي (یا "left"یا "right").
• relatedTarget: د DOM عنصر چې د فعال توکي په توګه ځای پرځای شوی.
• from: د اوسني توکي شاخص
• to: د راتلونکي توکي شاخص

د carousel ټولې پیښې پخپله په carousel کې ډزې کیږي (یعنې په <div class="carousel">).

$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

د لیږد موده بدل کړئ

د لیږد موده د تالیف کولو یا دودیز سټایلونو دمخه .carousel-itemد Sass متغیر سره بدل کیدی شي $carousel-transitionکه تاسو تالیف شوی CSS کاروئ. که ډیری لیږدونه پلي شي، ډاډ ترلاسه کړئ چې د لیږد لیږد لومړی تعریف شوی (د مثال په توګه transition: transform 2s ease, opacity .5s ease-out).