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түлхүүр үгсийг хүлээн авдаг бөгөөд энэ нь слайдын байрлалыг одоогийн байрлалтай нь харьцуулан өөрчилдөг. Эсвэл слайдын байрлалыг -ээр эхэлсэн тодорхой индекс рүү шилжүүлдэг тойруулга руу түүхий слайдын индексийг дамжуулахын тулд ашиглана уу .prevnextdata-slide-todata-slide-to="2"0

Уг data-ride="carousel"атрибутыг хуудас ачаалж эхлэх үед тойруулгыг хөдөлгөөнт гэж тэмдэглэхэд ашигладаг. Үүнийг ижил тойруулгыг JavaScript-н ил тод эхлүүлсэн (илүүдэл ба шаардлагагүй) хослуулан ашиглах боломжгүй.

JavaScript-ээр дамжуулан

Дараахаар тойруулгыг гараар дууд:

$('.carousel').carousel()

Сонголтууд

Сонголтуудыг өгөгдлийн шинж чанарууд эсвэл JavaScript-ээр дамжуулж болно. Өгөгдлийн шинж чанаруудын хувьд сонголтын нэрийг -д data-хавсаргана data-interval="".

Нэр Төрөл Өгөгдмөл Тодорхойлолт
интервал тоо 5000 Тухайн зүйлийг автоматаар эргүүлэх хооронд саатах хугацаа. Хэрэв худал бол тойруулга автоматаар эргэхгүй.
гар логик үнэн Тойрог гарны үйл явдалд хариу үйлдэл үзүүлэх эсэх.
түр зогсоох мөр | логик "хулганах"

Хэрэв гэж тохируулсан бол "hover"тойруулалтын дугуйг түр зогсоож, эргүүлэх хөдөлгөөнийг асаалттай mouseenterүргэлжлүүлнэ mouseleave. Хэрэв гэж тохируулсан бол falseтойруулуур дээр хулганыг түр зогсоохгүй.

Мэдрэгчтэй төхөөрөмжүүд дээр, гэж тохируулсан үед "hover"дугуйн хөдөлгөөнийг автоматаар үргэлжлүүлэхийн өмнө хоёр интервалаар түр зогсооно touchend(хэрэглэгч тойруулгатай харьцаж дууссаны дараа). Энэ нь дээр дурдсан хулганы зан үйлээс гадна гэдгийг анхаарна уу.

унах мөр худлаа Хэрэглэгч эхний зүйлийг гараар эргүүлсний дараа тойруулгыг автоматаар тоглуулна. Хэрэв "carousel" бол ачааллын үед тойруулгыг автоматаар тоглуулна.
боох логик үнэн Тойрог тасралтгүй эргэлдэх үү, эсвэл хатуу зогсолттой байх уу.

Арга зүй

Асинхрон аргууд ба шилжилтүүд

Бүх 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')

Элементийн тойруулгыг устгадаг.

Үйл явдал

Bootstrap-ийн тойруулгын анги нь тойруулгын функцэд холбогдох хоёр үйл явдлыг харуулдаг. Хоёр үйл явдал нь дараахь нэмэлт шинж чанартай байдаг.

  • direction: Тойрог гулсаж буй чиглэл ( "left"эсвэл "right").
  • relatedTarget: Идэвхтэй зүйл болгон байрлуулж буй DOM элемент.
  • from: Одоогийн зүйлийн индекс
  • to: Дараагийн зүйлийн индекс

Бүх тойруулгын үйл явдлуудыг тойруулгыг өөрөө (өөрөөр хэлбэл <div class="carousel">).

Үйл явдлын төрөл Тодорхойлолт
слайд.б.карусель slideИнстанцийн аргыг дуудсан үед энэ үйл явдал шууд идэвхждэг.
гулсуур.б.карусель Тойрог гулсуурын шилжилтийг хийж дуусмагц энэ үйл явдал идэвхгүй болно.
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})