Source

Carousel

ئېلېمېنتلار ئارقىلىق ۋېلىسىپىت مىنىشنىڭ تام تەسۋىر زاپچاسلىرى - رەسىم ياكى تېكىست تام تەسۋىرلىرى كارۇسېلغا ئوخشاش.

قانداق ئىشلەيدۇ

كارۇسېل بىر يۈرۈش مەزمۇنلار ئارقىلىق ۋېلىسىپىت مىنىشنىڭ تام تەسۋىرى بولۇپ ، CSS 3D ئۆزگەرتىش ۋە بىر ئاز JavaScript بىلەن ياسالغان. ئۇ بىر يۈرۈش رەسىم ، تېكىست ياكى ئىختىيارى بەلگە بىلەن ئىشلەيدۇ. ئۇ ئىلگىرىكى / كېيىنكى كونترول ۋە كۆرسەتكۈچلەرنى قوللاشنىمۇ ئۆز ئىچىگە ئالىدۇ.

Page Visibility API قوللايدىغان توركۆرگۈچلەردە ، تور بەت ئىشلەتكۈچىگە كۆرۈنمىگەندە كارۇسېل سىيرىلىپ كېتىشتىن ساقلىنىدۇ (مەسىلەن توركۆرگۈچ بەتكۈچى ئاكتىپلانمىغان ۋاقىتتا ، توركۆرگۈچ كۆزنىكى كىچىكلىتىلىدۇ).

شۇنىڭغا دىققەت قىلىڭكى ، ئۇۋىسى كارۇسېلنى قوللىمايدۇ ، كارۇسېل ئادەتتە ئىشلىتىش ئۆلچىمىگە ماس كەلمەيدۇ.

ئاخىرىدا ، ئەگەر سىز JavaScript نى مەنبەدىن قۇرغان بولسىڭىز ، ئۇ تەلەپ قىلىدۇutil.js .

مىسال

كارۇسېل تام تەسۋىرنى ئاپتوماتىك نورماللاشتۇرمايدۇ. بۇنداق بولغاندا ، مەزمۇننى مۇۋاپىق چوڭايتىش ئۈچۈن قوشۇمچە ئىقتىدار ياكى ئىختىيارى ئۇسلۇبلارنى ئىشلىتىشىڭىز مۇمكىن. كارۇسېل ئالدىنقى / كېيىنكى كونترول ۋە كۆرسەتكۈچلەرنى قوللىسىمۇ ، ئېنىق تەلەپ قىلىنمايدۇ. ئۆزىڭىز خالىغانچە قوشۇڭ ۋە خاسلاشتۇرۇڭ.

ئىختىيارى كونترول قىلىش ئۈچۈن ئۆزگىچە ID ئورنىتىشقا كاپالەتلىك قىلىڭ .carousel، بولۇپمۇ بىر بەتتە كۆپ كارۇسېل ئىشلىتىۋاتقان بولسىڭىز.

پەقەت تام تەسۋىر

بۇ يەردە پەقەت تام تەسۋىر بار كارۇسېل بار. .d-blockۋە كارۇسېل رەسىملىرىنىڭ بارلىقىغا دىققەت قىلىڭ ، .img-fluidتوركۆرگۈنىڭ سۈكۈتتىكى رەسىمنىڭ توغرىلىنىشىنىڭ ئالدىنى ئالىدۇ.

<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="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." 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="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." 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>

كۆرسەتكۈچ بىلەن

كارۇسېلغا كۆرسەتكۈچلەرنى كونترول قىلىش بىلەن بىللە قوشالايسىز.

<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="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." 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>
دەسلەپكى ئاكتىپ ئېلېمېنت تەلەپ قىلىنىدۇ

دەرسنى بىر تام .activeتەسۋىرگە قوشۇش كېرەك. بولمىسا ، كارۇسېل كۆرۈنمەيدۇ.

ئىزاھلار بىلەن

.carousel-captionتام تەسۋىرگە ھەر قانداق ئېلېمېنت بىلەن ئاسانلا خەت قوشۇڭ .carousel-item. ئىختىيارىي كۆرسىتىش قوراللىرى بىلەن تۆۋەندە كۆرسىتىلگەندەك كىچىك كۆرۈنۈشلەرگە ئاسانلا يوشۇرۇنغىلى بولىدۇ . بىز دەسلەپتە ئۇلارنى يوشۇرۇپ .d-none، ئوتتۇرا تىپتىكى ئۈسكۈنىلەرگە قايتۇرۇپ كېلىمىز .d-md-block.

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

ئىشلىتىش

سانلىق مەلۇمات خاسلىقى ئارقىلىق

سانلىق مەلۇمات خاسلىقىنى ئىشلىتىپ كارۇسېلنىڭ ئورنىنى ئاسانلا كونترول قىلىڭ. data-slideئاچقۇچلۇق سۆزلەرنى قوبۇل قىلىدۇ prevياكى nextتام تەسۋىر ئورنىنى ھازىرقى ئورنىغا ئۆزگەرتىدۇ. ئۇنىڭدىن باشقا ، data-slide-toخام تام تەسۋىر كۆرسەتكۈچىنى كارۇسېلغا يەتكۈزۈش ئۈچۈن ئىشلىتىڭ data-slide-to="2"، بۇ تام تەسۋىر ئورنىنى باشلىنىشتىن باشلاپ مەلۇم كۆرسەتكۈچكە يۆتكەيدۇ 0.

بۇ data-ride="carousel"خاسلىق كارۇسېلنى بەت يۈكىدىن باشلاپ جانلاندۇرۇش دەپ بەلگە قىلىشقا ئىشلىتىلىدۇ. ئۇنى ئوخشاش كارۇسېلنىڭ (ئارتۇقچە ۋە زۆرۈر بولمىغان) ئېنىق JavaScript دەسلەپكى قەدەمدە بىرلەشتۈرۈپ ئىشلىتىشكە بولمايدۇ.

JavaScript ئارقىلىق

كارۇسېل بىلەن قولدا تېلېفون قىلىڭ:

$('.carousel').carousel()

تاللانما

تاللانمىلارنى سانلىق مەلۇمات خاسلىقى ياكى JavaScript ئارقىلىق يەتكۈزگىلى بولىدۇ. سانلىق مەلۇمات خاسلىقى ئۈچۈن ، تاللاش نامىغا data-ئوخشاش data-interval="".

ئىسمى تىپ سۈكۈتتىكى چۈشەندۈرۈش
ئارىلىق سان 5000 بىر نەرسىنى ئاپتوماتىك ۋېلىسىپىت مىنىشنىڭ كېچىكىش ۋاقتى. ئەگەر يالغان بولسا ، كارۇسېل ئاپتوماتىك ئايلىنالمايدۇ.
كۇنۇپكا تاختىسى boolean true كارۇسېل كۇنۇپكا تاختىسىدىكى ھادىسىلەرگە ئىنكاس قايتۇرامدۇ يوق.
توختاپ string | boolean "hover"

تەڭشەلسە "hover"، كارۇسېلنىڭ ۋېلىسىپىت مىنىشنى توختىتىدۇ mouseenterۋە كارۇسېلنىڭ ۋېلىسىپىت مىنىشنى ئەسلىگە كەلتۈرىدۇ mouseleave. تەڭشەلسە false، كارۇسېل ئۈستىدە لەيلەپ توختاپ قالمايدۇ.

سېزىمچان ئۈسكۈنىلەردە تەڭشەلگەندە "hover"، ۋېلىسىپىت مىنىش touchend(ئىشلەتكۈچى كارۇسېل بىلەن ئۆز-ئارا تەسىرنى تۈگەتكەندىن كېيىن) ئىككى قېتىم توختاپ ، ئاپتوماتىك ئەسلىگە كېلىدۇ. شۇنىڭغا دىققەت قىلىڭكى ، بۇ يۇقىرىدىكى مائۇس ھەرىكىتىدىن باشقا.

ride string false ئىشلەتكۈچى بىرىنچى تۈرنى قولدا ئايلاندۇرغاندىن كېيىن كارۇسېلنى ئاپتوماتىك كۆرسىتىدۇ. ئەگەر «كارۇسېل» بولسا ، كارۇسېلنى يۈككە ئاپتوماتىك ھەيدەيدۇ.
wrap 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')

بىر ئېلېمېنتنىڭ كارۇسېلنى بۇزىدۇ.

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…
})