კარუსელი
სლაიდშოუს კომპონენტი ელემენტების - სურათების ან ტექსტის სლაიდების ველოსიპედით გადასაადგილებლად, კარუსელის მსგავსად.
Როგორ მუშაობს
კარუსელი არის სლაიდშოუ ველოსიპედით გადასაადგილებლად კონტენტის სერიის მეშვეობით, აგებულია CSS 3D ტრანსფორმაციებით და ცოტა JavaScript-ით. ის მუშაობს სურათების, ტექსტის ან მორგებული მარკირების სერიით. იგი ასევე მოიცავს წინა/შემდეგი კონტროლისა და ინდიკატორების მხარდაჭერას.
ბრაუზერებში, სადაც გვერდის ხილვადობის API არის მხარდაჭერილი, კარუსელი თავიდან აიცილებს სრიალს, როდესაც ვებგვერდი მომხმარებლისთვის არ ჩანს (მაგალითად, როდესაც ბრაუზერის ჩანართი არააქტიურია, ბრაუზერის ფანჯარა მინიმუმამდეა დაყვანილი და ა.შ.).
prefers-reduced-motion
მედიის მოთხოვნაზე. იხილეთ
ჩვენი ხელმისაწვდომობის დოკუმენტაციის შემცირებული მოძრაობის განყოფილება .
გთხოვთ, გაითვალისწინოთ, რომ ჩასმული კარუსელები არ არის მხარდაჭერილი და კარუსელები, როგორც წესი, არ შეესაბამება ხელმისაწვდომობის სტანდარტებს.
მაგალითი
კარუსელები ავტომატურად არ ახდენს სლაიდების ზომების ნორმალიზებას. როგორც ასეთი, შეიძლება დაგჭირდეთ დამატებითი უტილიტების ან მორგებული სტილის გამოყენება შინაარსის შესაბამისი ზომისთვის. მიუხედავად იმისა, რომ კარუსელები მხარს უჭერენ წინა/შემდეგ კონტროლს და ინდიკატორებს, ისინი აშკარად არ არის საჭირო. დაამატეთ და შეცვალეთ თქვენი შეხედულებისამებრ.
.active
კლასი უნდა დაემატოს ერთ-ერთ სლაიდს, წინააღმდეგ შემთხვევაში კარუსელი არ გამოჩნდება. id
ასევე, დარწმუნდით, რომ დააყენეთ უნიკალური .carousel
არჩევითი კონტროლისთვის, განსაკუთრებით თუ იყენებთ რამდენიმე კარუსელს ერთ გვერდზე. საკონტროლო და ინდიკატორი ელემენტებს უნდა ჰქონდეს data-bs-target
ატრიბუტი (ან href
ბმულებისთვის), რომელიც ემთხვევა id
ელემენტის ატრიბუტს .carousel
.
მხოლოდ სლაიდები
აქ არის კარუსელი მხოლოდ სლაიდებით. გაითვალისწინეთ კარუსელის სურათების არსებობა .d-block
და .w-100
ბრაუზერის ნაგულისხმევი სურათების გასწორების თავიდან ასაცილებლად.
<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"
.
<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>
ინდიკატორებით
თქვენ ასევე შეგიძლიათ დაამატოთ ინდიკატორები კარუსელში, კონტროლერებთან ერთად.
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
<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
.
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
<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
თქვენს კარუსელში სლაიდების ანიმაციისთვის სლაიდის ნაცვლად გაცვეთილი გადასვლით.
<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
ში, რათა შეცვალოთ დროის დაყოვნება ველოსიპედის ავტომატურად გადაადგილებას შორის შემდეგ ელემენტზე.
<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
ატრიბუტს და აქვს data-bs-interval="false"
ამიტომ ის ავტომატურად არ ითამაშებს.
<div id="carouselExampleControlsNoTouching" class="carousel slide" data-bs-touch="false" data-bs-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-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
მუქი კონტროლისთვის, ინდიკატორებისა და წარწერებისთვის. საკონტროლო პუნქტები ინვერსიულია მათი ნაგულისხმევი თეთრი შევსებიდან filter
CSS თვისებით. სუბტიტრებსა და კონტროლს აქვს დამატებითი Sass ცვლადები, რომლებიც ახდენენ color
და background-color
.
<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-duration
Sass ცვლადით კომპილაციამდე ან მორგებული სტილები, თუ თქვენ იყენებთ შედგენილ 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-ის საშუალებით
კარუსელის ხელით გამოძახება:
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel)
Პარამეტრები
ოფციების გადაცემა შესაძლებელია მონაცემთა ატრიბუტების ან JavaScript-ის საშუალებით. მონაცემთა ატრიბუტებისთვის, დაამატეთ ვარიანტის სახელი data-bs-
, როგორც data-bs-interval=""
.
სახელი | ტიპი | ნაგულისხმევი | აღწერა |
---|---|---|---|
interval |
ნომერი | 5000 |
დრო, რომელიც დაგვიანებულია ნივთის ავტომატურ ველოსიპედს შორის. თუ false , კარუსელი ავტომატურად არ დატრიალდება. |
keyboard |
ლოგიკური | true |
უნდა რეაგირებდეს თუ არა კარუსელი კლავიატურის მოვლენებზე. |
pause |
სიმებიანი | ლოგიკური | 'hover' |
თუ დაყენებულია შეხებით ჩართულ მოწყობილობებზე, როდესაც დაყენებულია ველზე |
ride |
სიმებიანი | ლოგიკური | false |
ავტომატურად უკრავს კარუსელს მას შემდეგ, რაც მომხმარებელი ხელით გადააბრუნებს პირველ ელემენტს. თუ დაყენებულია 'carousel' ზე, ავტომატურად უკრავს კარუსელს ჩატვირთვისას. |
wrap |
ლოგიკური | true |
უნდა მოძრაობდეს თუ არა კარუსელი განუწყვეტლივ თუ რთული გაჩერებები. |
touch |
ლოგიკური | true |
მხარდაჭერილი უნდა იყოს თუ არა კარუსელმა მარცხნივ/მარჯვნივ გადაფურცვლა სენსორულ მოწყობილობებზე. |
მეთოდები
ასინქრონული მეთოდები და გადასვლები
ყველა API მეთოდი ასინქრონულია და იწყებს გადასვლას . ისინი უბრუნდებიან აბონენტს გადასვლის დაწყებისთანავე, მაგრამ მის დასრულებამდე . გარდა ამისა, მეთოდის გამოძახება გარდამავალ კომპონენტზე იგნორირებული იქნება .
იხილეთ ჩვენი JavaScript დოკუმენტაცია დამატებითი ინფორმაციისთვის .
თქვენ შეგიძლიათ შექმნათ კარუსელის მაგალითი კარუსელის კონსტრუქტორით, მაგალითად, დამატებითი ოფციების ინიციალიზაციისთვის და ველოსიპედით გადაადგილების დასაწყებად:
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel, {
interval: 2000,
wrap: false
})
მეთოდი | აღწერა |
---|---|
cycle |
მოძრაობს კარუსელის ელემენტებში მარცხნიდან მარჯვნივ. |
pause |
აჩერებს კარუსელს ნივთების ველოსიპედით გადაადგილებას. |
prev |
ციკლები წინა პუნქტამდე. უბრუნდება აბონენტს წინა ელემენტის ჩვენებამდე (მაგ., slid.bs.carousel მოვლენის დადგომამდე). |
next |
ციკლები შემდეგ პუნქტზე. უბრუნდება აბონენტს შემდეგი ელემენტის ჩვენებამდე (მაგ., slid.bs.carousel მოვლენის დადგომამდე). |
nextWhenVisible |
არ გადაიტანოთ კარუსელი შემდეგზე, როცა გვერდი არ ჩანს ან კარუსელი ან მისი მშობელი არ ჩანს. უბრუნდება აბონენტს სამიზნე ნივთის ჩვენებამდე |
to |
აბრუნებს კარუსელს კონკრეტულ ჩარჩოზე (0-ზე დაფუძნებული, მასივის მსგავსი). უბრუნდება აბონენტს სამიზნე ნივთის ჩვენებამდე (მაგ., slid.bs.carousel მოვლენის დაწყებამდე). |
dispose |
ანადგურებს ელემენტის კარუსელს. (შლის DOM ელემენტზე შენახულ მონაცემებს) |
getInstance |
სტატიკური მეთოდი, რომელიც საშუალებას გაძლევთ მიიღოთ DOM ელემენტთან დაკავშირებული კარუსელის მაგალითი, შეგიძლიათ გამოიყენოთ იგი შემდეგნაირად:bootstrap.Carousel.getInstance(element) |
getOrCreateInstance |
სტატიკური მეთოდი, რომელიც აბრუნებს კარუსელის მაგალითს, რომელიც ასოცირდება DOM ელემენტთან, ან ქმნის ახალს, თუ ის არ იყო ინიციალიზებული. თქვენ შეგიძლიათ გამოიყენოთ იგი შემდეგნაირად:bootstrap.Carousel.getOrCreateInstance(element) |
Ივენთი
Bootstrap-ის კარუსელის კლასი ავლენს ორ მოვლენას კარუსელის ფუნქციონალებში ჩასართავად. ორივე მოვლენას აქვს შემდეგი დამატებითი თვისებები:
direction
: მიმართულება, რომლითაც სრიალებს კარუსელი (ან"left"
ან"right"
).relatedTarget
: DOM ელემენტი, რომელიც სრიალდება ადგილზე, როგორც აქტიური ელემენტი.from
: მიმდინარე ელემენტის ინდექსიto
: შემდეგი ელემენტის ინდექსი
კარუსელის ყველა ღონისძიება ის��ოლება თავად კარუსელზე (ანუ ზე <div class="carousel">
).
ღონისძიების ტიპი | აღწერა |
---|---|
slide.bs.carousel |
მაშინვე ირთვება slide ინსტანციის მეთოდის გამოძახებისას. |
slid.bs.carousel |
გასროლა, როდესაც კარუსელი დაასრულებს სლაიდზე გადასვლას. |
var myCarousel = document.getElementById('myCarousel')
myCarousel.addEventListener('slide.bs.carousel', function () {
// do something...
})