კარუსელი

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

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

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

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

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

და ბოლოს, თუ თქვენ აშენებთ ჩვენს JavaScript-ს წყაროდან, ის მოითხოვსutil.js .

მაგალითი

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

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

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

აქ არის კარუსელი მხოლოდ სლაიდებით. გაითვალისწინეთ კარუსელის სურათების არსებობა .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>

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

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

წინა შემდეგი

<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, pharetra augue mollis interdum.

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

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

ეს არის 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", როგორც ანიმაციური გვერდის ჩატვირთვისას. მისი გამოყენება შეუძლებელია იმავე კარუსელის (ზედმეტად და არასაჭირო) აშკარა JavaScript ინიციალიზაციასთან ერთად.

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

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

$('.carousel').carousel()

Პარამეტრები

ოფციების გადაცემა შესაძლებელია მონაცემთა ატრიბუტების ან JavaScript-ის საშუალებით. მონაცემთა ატრიბუტებისთვის, დაამატეთ ვარიანტის სახელი 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')

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

Ივენთი

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

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

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

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

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

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