კარუსელი

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

ამ გვერდზე

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

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

ბრაუზერებში, სადაც გვერდის ხილვადობის API არის მხარდაჭერილი, კარუსელი თავიდან აიცილებს სრიალს, როდესაც ვებგვერდი მომხმარებლისთვის არ ჩანს (მაგალითად, როდესაც ბრაუზერის ჩანართი არააქტიურია, ბრაუზერის ფანჯარა მინიმუმამდეა დაყვანილი და ა.შ.).

ამ კომპონენტის ანიმაციური ეფექტი დამოკიდებულია prefers-reduced-motionმედიის მოთხოვნაზე. იხილეთ ჩვენი ხელმისაწვდომობის დოკუმენტაციის შემცირებული მოძრაობის განყოფილება .

გთხოვთ, გაითვალისწინოთ, რომ ჩასმული კარუსელები არ არის მხარდაჭერილი და კარუსელები, როგორც წესი, არ შეესაბამება ხელმისაწვდომობის სტანდარტებს.

მაგალითი

კარუსელები ავტომატურად არ ახდენს სლაიდების ზომების ნორმალიზებას. როგორც ასეთი, შეიძლება დაგჭირდეთ დამატებითი უტილიტების ან მორგებული სტილის გამოყენება შინაარსის შესაბამისი ზომისთვის. მიუხედავად იმისა, რომ კარუსელები მხარს უჭერენ წინა/შემდეგ კონტროლს და ინდიკატორებს, ისინი აშკარად არ არის საჭირო. დაამატეთ და შეცვალეთ თქვენი შეხედულებისამებრ.

.activeკლასი უნდა დაემატოს ერთ-ერთ სლაიდს, წინააღმდეგ შემთხვევაში კარუსელი არ გამოჩნდება. idასევე, დარწმუნდით, რომ დააყენეთ უნიკალური .carouselარჩევითი კონტროლისთვის, განსაკუთრებით თუ იყენებთ რამდენიმე კარუსელს ერთ გვერდზე. საკონტროლო და ინდიკატორი ელემენტებს უნდა ჰქონდეს data-bs-targetატრიბუტი (ან hrefბმულებისთვის), რომელიც ემთხვევა idელემენტის ატრიბუტს .carousel.

მხოლოდ სლაიდები

აქ არის კარუსელი მხოლოდ სლაიდებით. გაითვალისწინეთ კარუსელის სურათების არსებობა .d-blockდა .w-100ბრაუზერის ნაგულისხმევი სურათების გასწორების თავიდან ასაცილებლად.

html

<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-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".

html

<div id="carouselExampleControls" class="carousel slide" data-bs-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-bs-target="#carouselExampleControls" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

ინდიკატორებით

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

html

<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="true">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <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-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

წარწერებით

დაამატეთ სუბტიტრები თქვენს სლაიდებს მარტივად .carousel-captionნებისმიერი ელემენტის ფარგლებში .carousel-item. მათი ადვილად დამალვა შესაძლებელია მცირე ხედის პორტებზე, როგორც ეს ნაჩვენებია ქვემოთ, არჩევითი დისპლეის კომუნალური საშუალებებით . ჩვენ მათ თავდაპირველად ვმალავთ .d-noneდა ვაბრუნებთ საშუალო ზომის მოწყობილობებზე .d-md-block.

პირველი სლაიდის ეტიკეტი

ზოგიერთი წარმომადგენლობითი ჩანაცვლების კონტენტი პირველი სლაიდისთვის.

მეორე სლაიდის ეტიკეტი

ზოგიერთი წარმომადგენლობითი ჩანაცვლების კონტენტი მეორე სლაიდისთვის.

მესამე სლაიდის ეტიკეტი

ზოგიერთი წარმომადგენლობითი ჩანაცვლების კონტენტი მესამე სლაიდისთვის.

html

<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="false">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <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-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Crossfade

დაამატეთ .carousel-fadeთქვენს კარუსელში სლაიდების ანიმაციისთვის სლაიდის ნაცვლად გაცვეთილი გადასვლით. თქვენი კარუსელის კონტენტიდან გამომდინარე (მაგ., მხოლოდ ტექსტის სლაიდები), შეიძლება დაგჭირდეთ s-ში დაამატოთ .bg-bodyან რაიმე მორგებული CSS .carousel-itemსათანადო ჯვარედინი გაფორმებისთვის.

html

<div id="carouselExampleFade" class="carousel slide carousel-fade" data-bs-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-bs-target="#carouselExampleFade" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

ინდივიდუალური `.carousel-item`ინტერვალი

დაამატეთ data-bs-interval=""a- .carousel-itemში, რათა შეცვალოთ დროის დაყოვნება ველოსიპედის ავტომატურად გადაადგილებას შორის შემდეგ ელემენტზე.

html

<div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active" data-bs-interval="10000">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item" data-bs-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-bs-target="#carouselExampleInterval" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

გამორთეთ შეხებით გადაფურცვლა

კარუსელები მხარს უჭერენ სენსორულ მოწყობილობებზე მარცხნივ/მარჯვნივ გადაფურცვლას სლაიდებს შორის გადაადგილებისთვის. ეს შეიძლება გამორთოთ data-bs-touchატრიბუტის გამოყენებით. ქვემოთ მოყვანილი მაგალითი ასევე არ შეიცავს data-bs-rideატრიბუტს, ამიტომ ის ავტომატურად არ ითამაშებს.

html

<div id="carouselExampleControlsNoTouching" class="carousel slide" data-bs-touch="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-bs-target="#carouselExampleControlsNoTouching" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControlsNoTouching" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

მუქი ვარიანტი

დაამატეთ .carousel-darkუფრო .carouselმუქი კონტროლისთვის, ინდიკატორებისა და წარწერებისთვის. საკონტროლო პუნქტები ინვერსიულია მათი ნაგულისხმევი თეთრი შევსებიდან filterCSS თვისებით. სუბტიტრებსა და კონტროლს აქვს დამატებითი Sass ცვლადები, რომლებიც ახდენენ colorდა background-color.

პირველი სლაიდის ეტიკეტი

ზოგიერთი წარმომადგენლობითი ჩანაცვლების კონტენტი პირველი სლაიდისთვის.

მეორე სლაიდის ეტიკეტი

ზოგიერთი წარმომადგენლობითი ჩანაცვლების კონტენტი მეორე სლაიდისთვის.

მესამე სლაიდის ეტიკეტი

ზოგიერთი წარმომადგენლობითი ჩანაცვლების კონტენტი მესამე სლაიდისთვის.

html

<div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active" data-bs-interval="10000">
      <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" data-bs-interval="2000">
      <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-bs-target="#carouselExampleDark" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

მორგებული გადასვლა

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

სას

ცვლადები

ცვლადები ყველა კარუსელისთვის:

$carousel-control-color:             $white;
$carousel-control-width:             15%;
$carousel-control-opacity:           .5;
$carousel-control-hover-opacity:     .9;
$carousel-control-transition:        opacity .15s ease;

$carousel-indicator-width:           30px;
$carousel-indicator-height:          3px;
$carousel-indicator-hit-area-height: 10px;
$carousel-indicator-spacer:          3px;
$carousel-indicator-opacity:         .5;
$carousel-indicator-active-bg:       $white;
$carousel-indicator-active-opacity:  1;
$carousel-indicator-transition:      opacity .6s ease;

$carousel-caption-width:             70%;
$carousel-caption-color:             $white;
$carousel-caption-padding-y:         1.25rem;
$carousel-caption-spacer:            1.25rem;

$carousel-control-icon-width:        2rem;

$carousel-control-prev-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>");
$carousel-control-next-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>");

$carousel-transition-duration:       .6s;
$carousel-transition:                transform $carousel-transition-duration ease-in-out; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)

ცვლადები მუქი კარუსელისთვის :

$carousel-dark-indicator-active-bg:  $black;
$carousel-dark-caption-color:        $black;
$carousel-dark-control-icon-filter:  invert(1) grayscale(100);

გამოყენება

მონაცემთა ატრიბუტების მეშვეობით

გამოიყენეთ მონაცემთა ატრიბუტები კარუსელის პოზიციის მარტივად გასაკონტროლებლად. data-bs-slideიღებს საკვანძო სიტყვებს prevან next, რომელიც ცვლის სლაიდის პოზიციას მის ამჟამინდელ პოზიციასთან შედარებით. ალტერნატიულად, გამოიყენეთ data-bs-slide-toნედლი სლაიდის ინდექსის კარუსელში გადასაცემად data-bs-slide-to="2", რომელიც ცვლის სლაიდის პოზიციას კონკრეტულ ინდექსზე დაწყებული 0.

ატრიბუტი გამოიყენება კარუსელის აღსანიშნავად data-bs-ride="carousel", როგორც ანიმაციური გვერდის ჩატვირთვისას. თუ არ იყენებთ data-bs-ride="carousel"კარუსელის ინიციალიზაციას, თქვენ თავად უნდა მოაწყოთ იგი. მისი გამოყენება შეუძლებელია იმავე კარუსელის (ზედმეტად და არასაჭირო) აშკარა JavaScript ინიციალიზაციასთან ერთად.

JavaScript-ის საშუალებით

კარუსელის ხელით გამოძახება:

const carousel = new bootstrap.Carousel('#myCarousel')

Პარამეტრები

იმის გამო, რომ ოფციების გადაცემა შესაძლებელია მონაცემთა ატრიბუტების ან JavaScript-ის საშუალებით, შეგიძლიათ დაამატოთ ოფციის სახელი data-bs-, როგორც data-bs-animation="{value}". დარწმუნდით, რომ შეცვალეთ ოფციის სახელის ქეისის ტიპი „ camelCase “-დან „ kebab-case “-ზე ოფციების მონაცემთა ატრიბუტების მეშვეობით გადაცემისას. მაგალითად, გამოიყენეთ data-bs-custom-class="beautifier"ნაცვლად data-bs-customClass="beautifier".

როგორც Bootstrap 5.2.0, ყველა კომპონენტი მხარს უჭერს ექსპერიმენტულ რეზერვირებული მონაცემთა ატრიბუტს data-bs-config, რომელსაც შეუძლია მარტივი კომპონენტის კონფიგურაცია JSON სტრიქონის სახით. როდესაც ელემენტს აქვს data-bs-config='{"delay":0, "title":123}'და data-bs-title="456"ატრიბუტები, საბოლოო titleმნიშვნელობა იქნება 456და ცალკეული მონაცემთა ატრიბუტები გადალახავს მნიშვნელობებს, რომლებიც მოცემულია data-bs-config. გარდა ამისა, არსებულ მონაცემთა ატრიბუტებს შეუძლიათ JSON მნიშვნელობების შენახვა, როგორიცაა data-bs-delay='{"show":0,"hide":150}'.

სახელი	ტიპი	ნაგულისხმევი	აღწერა
`interval`	ნომერი	`5000`	დრო, რომელიც დაგვიანებულია ნივთის ავტომატურ ველოსიპედს შორის.
`keyboard`	ლოგიკური	`true`	უნდა რეაგირებდეს თუ არა კარუსელი კლავიატურის მოვლენებზე.
`pause`	სიმებიანი, ლოგიკური	`"hover"`	თუ დაყენებულია `"hover"`, აჩერებს კარუსელის `mouseenter`ველოსიპედს და განაახლებს კარუსელის ველოსიპედის ჩართვას `mouseleave`. თუ დაყენებულია `false`-ზე, კარუსელზე გადახვევა არ შეაჩერებს მას. შეხებით ჩართულ მოწყობილობებზე, როდესაც დაყენებულია ველზე `"hover"`, ველოსიპედით მოძრაობა შეჩერდება `touchend`(როდესაც მომხმარებელი დაასრულებს კარუსელთან ინტერაქციას) ორი ინტერვალით, სანამ ავტომატურად განახლდება. ეს არის თაგვის ქცევის გარდა.
`ride`	სიმებიანი, ლოგიკური	`false`	თუ დაყენებულია `true`-ზე, ავტომატურად უკრავს კარუსელს მას შემდეგ, რაც მომხმარებელი ხელით გადააბრუნებს პირველ ელემენტს. თუ დაყენებულია `"carousel"`ზე, ავტომატურად უკრავს კარუსელს ჩატვირთვისას.
`touch`	ლოგიკური	`true`	მხარდაჭერილი უნდა იყოს თუ არა კარუსელმა მარცხნივ/მარჯვნივ გადაფურცვლა სენსორულ მოწყობილობებზე.
`wrap`	ლოგიკური	`true`	უნდა მოძრაობდეს თუ არა კარუსელი განუწყვეტლივ თუ რთული გაჩერებები.

მეთოდები

ასინქრონული მეთოდები და გადასვლები

ყველა API მეთოდი ასინქრონულია და იწყებს გადასვლას . ისინი უბრუნდებიან აბონენტს გადასვლის დაწყებისთანავე, მაგრამ მის დასრულებამდე . გარდა ამისა, მეთოდის გამოძახება გარდამავალ კომპონენტზე იგნორირებული იქნება .

იხილეთ ჩვენი JavaScript დოკუმენტაცია დამატებითი ინფორმაციისთვის .

თქვენ შეგიძლიათ შექმნათ კარუსელის მაგალითი კარუსელის კონსტრუქტორით, მაგალითად, დამატებითი ოფციების ინიციალიზაციისთვის და ველოსიპედით გადაადგილების დასაწყებად:

const myCarouselElement = document.querySelector('#myCarousel')
const carousel = new bootstrap.Carousel(myCarouselElement, {
  interval: 2000,
  wrap: false
})

მეთოდი	აღწერა
`cycle`	მოძრაობს კარუსელის ელემენტებში მარცხნიდან მარჯვნივ.
`dispose`	ანადგურებს ელემენტის კარუსელს. (შლის DOM ელემენტზე შენახულ მონაცემებს)
`getInstance`	სტატიკური მეთოდი, რომელიც საშუალებას გაძლევთ მიიღოთ კარუსელის ინსტანცია ასოცირებული DOM ელემენტთან, შეგიძლიათ გამოიყენოთ იგი შემდეგნაირად: `bootstrap.Carousel.getInstance(element)`.
`getOrCreateInstance`	სტატიკური მეთოდი, რომელიც აბრუნებს DOM ელემენტთან დაკავშირებულ კარუსელის მაგალითს ან ქმნის ახალს, თუ ის არ იყო ინიციალიზებული. შეგიძლიათ გამოიყენოთ ეს ასე: `bootstrap.Carousel.getOrCreateInstance(element)`.
`next`	ციკლები შემდეგ პუნქტზე. უბრუნდება აბონენტს შემდეგი ელემენტის ჩვენებამდე (მაგ., `slid.bs.carousel`მოვლენის დადგომამდე).
`nextWhenVisible`	არ გადაიტანოთ კარუსელი შემდეგზე, როცა გვერდი არ ჩანს ან კარუსელი ან მისი მშობელი არ ჩანს. უბრუნდება აბონენტს სამიზნე ნივთის ჩვენებამდე .
`pause`	აჩერებს კარუსელს ნივთების ველოსიპედით გადაადგილებას.
`prev`	ციკლები წინა პუნქტამდე. უბრუნდება აბონენტს წინა ელემენტის ჩვენებამდე (მაგ., `slid.bs.carousel`მოვლენის დადგომამდე).
`to`	აბრუნებს კარუსელს კონკრეტულ ჩარჩოზე (0-ზე დაფუძნებული, მასივის მსგავსი). უბრუნდება აბონენტს სამიზნე ნივთის ჩვენებამდე (მაგ., `slid.bs.carousel`მოვლენის დაწყებამდე).

Ივენთი

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

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

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

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

const myCarousel = document.getElementById('myCarousel')

myCarousel.addEventListener('slide.bs.carousel', event => {
  // do something...
})

კარუსელი

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

მაგალითი

მხოლოდ სლაიდები

კონტროლით

ინდიკატორებით

წარწერებით

პირველი სლაიდის ეტიკეტი

მეორე სლაიდის ეტიკეტი

მესამე სლაიდის ეტიკეტი

Crossfade

ინდივიდუალური .carousel-itemინტერვალი

გამორთეთ შეხებით გადაფურცვლა

მუქი ვარიანტი

პირველი სლაიდის ეტიკეტი

მეორე სლაიდის ეტიკეტი

მესამე სლაიდის ეტიკეტი

მორგებული გადასვლა

სას

ცვლადები

გამოყენება

მონაცემთა ატრიბუტების მეშვეობით

JavaScript-ის საშუალებით

Პარამეტრები

მეთოდები

ასინქრონული მეთოდები და გადასვლები

Ივენთი

ინდივიდუალური `.carousel-item`ინტერვალი