კარუსელი

სლაიდშოუს კომპონენტი ელემენტების - სურათების ან ტექსტის სლაიდების ველოსიპედით გადასაადგილებლად, კარუსელის მსგავსად.

Როგორ მუშაობს

კარუსელი არის სლაიდშოუ ველოსიპედით გადასაადგილებლად კონტენტის სერიის მეშვეობით, აგებულია CSS 3D ტრანსფორმაციებით და ცოტა JavaScript-ით. ის მუშაობს სურათების, ტექსტის ან მორგებული მარკირების სერიით. იგი ასევე მოიცავს წინა/შემდეგი კონტროლისა და ინდიკატორების მხარდაჭერას.

ბრაუზერებში, სადაც გვერდის ხილვადობის 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`, კარუსელი ავტომატურად არ დატრიალდება.
კლავიატურა	ლოგიკური	მართალია	უნდა რეაგირებდეს თუ არა კარუსელი კლავიატურის მოვლენებზე.
პაუზა	სიმებიანი \| ლოგიკური	"ჰოვერ"	თუ დაყენებულია `'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')`

ანადგურებს ელემენტის კარუსელს.

`.carousel('nextWhenVisible')`

არ გადაიტანოთ კარუსელი შემდეგზე, როდესაც გვერდი არ ჩანს ან კარუსელი ან მისი მშობელი არ ჩანს. უბრუნდება აბონენტს შემდეგი ელემენტის ჩვენებამდე (ანუ slid.bs.carouselმოვლენის დადგომამდე).

`.carousel('to')`

აბრუნებს კარუსელს კონკრეტულ ჩარჩოზე (0-ზე დაფუძნებული, მასივის მსგავსი). უბრუნდება აბონენტს შემდეგი ელემენტის ჩვენებამდე (ანუ slid.bs.carouselმოვლენის დადგომამდე).

Ივენთი

Bootstrap-ის კარუსელის კლასი ავლენს ორ მოვლენას კარუსელის ფუნქციონალებში ჩასართავად. ორივე მოვლენას აქვს შემდეგი დამატებითი თვისებები:

direction: მიმართულება, რომლითაც სრიალებს კარუსელი (ან "left"ან "right").
relatedTarget: DOM ელემენტი, რომელიც სრიალდება ადგილზე, როგორც აქტიური ელემენტი.
from: მიმდინარე ელემენტის ინდექსი
to: შემდეგი ელემენტის ინდექსი

კარუსელის ყველა ღონისძიება ისროლება თავად კარუსელზე (ანუ ზე <div class="carousel">).

ღონისძიების ტიპი	აღწერა
სლაიდი.ბს.კარუსელი	ეს მოვლენა მაშინვე ირთვება, როდესაც `slide`ინსტანციის მეთოდი გამოიძახება.
slid.bs.კარუსელი	ეს ღონისძიება გააქტიურებულია, როდესაც კარუსელი დაასრულებს სლაიდზე გადასვლას.

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

გადასვლის ხანგრძლივობის შეცვლა

გადასვლის ხანგრძლივობა .carousel-itemშეიძლება შეიცვალოს $carousel-transitionSass ცვლადით კომპილაციამდე ან მორგებული სტილები, თუ თქვენ იყენებთ შედგენილ CSS-ს. თუ გამოყენებულია მრავალი გადასვლები, დარწმუნდით, რომ ტრანსფორმაციის გარდამავალი პირველია განსაზღვრული (მაგ. transition: transform 2s ease, opacity .5s ease-out).