Önyükleme JS Karusel
JS Carousel (carousel.js)
Döngü eklentisi, atlıkarınca (slayt gösterisi) gibi öğeler arasında geçiş yapmak için bir bileşendir.
Döngüler hakkında bir eğitim için, Önyükleme Döner Karusel Eğitimimizi okuyun .
Not: Döngüler Internet Explorer 9 ve önceki sürümlerde düzgün şekilde desteklenmez (çünkü slayt efektini elde etmek için CSS3 geçişlerini ve animasyonlarını kullanırlar).
Carousel Eklenti Sınıfları
Class | Description |
---|---|
.carousel | Creates a carousel |
.slide | Adds a CSS transition and animation effect when sliding from one item to the next. Remove this class if you do not want this effect |
.carousel-indicators | Adds indicators for the carousel. These are the little dots at the bottom of each slide (which indicates how many slides there are in the carousel, and which slide the user are currently viewing) |
.carousel-inner | Adds slides to the carousel |
.icon-next | Unicode icon (arrow pointing right), used in carousels. This is often used instead of a glyphicon |
.icon-prev | Unicode icon (arrow pointing left), used in carousels. This is often used instead of a glyphicon |
.item | Specifies the content of each slide |
.left carousel-control | Adds a left button to the carousel, which allows the user to go back between the slides |
.right carousel-control | Adds a right button to the carousel, which allows the user to go forward between the slides |
.carousel-caption | Specifies a caption for the carousel |
Veri-* Öznitelikler aracılığıyla
Nitelik data-ride="carousel"
, atlıkarıncayı etkinleştirir.
data-slide
ve öznitelikleri , data-slide-to
hangi slayda gidileceğini belirtir.
Nitelik data-slide
iki değeri kabul eder: önceki veya
sonrakidata-slide-to
, sayıları kabul ederken
.
Örnek
<!-- Carousel -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Carousel Indicators -->
<li data-target="#myCarousel" data-slide-to="1"></li>
<!-- Carousel Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
JavaScript aracılığıyla
Şunlarla manuel olarak etkinleştirin:
Örnek
// Activate Carousel
$("#myCarousel").carousel();
// Enable Carousel Indicators
$(".item").click(function(){
$("#myCarousel").carousel(1);
});
// Enable Carousel Controls
$(".left").click(function(){
$("#myCarousel").carousel("prev");
});
Dönen Seçenekler
Seçenekler, veri öznitelikleri veya JavaScript aracılığıyla iletilebilir. Veri öznitelikleri için, data-interval="" gibi seçenek adını data-'ye ekleyin.
Name | Type | Default | Description | Try it |
---|---|---|---|---|
interval | number, or the boolean false | 5000 |
Specifies the delay (in milliseconds) between each slide. Note: Set interval to false to stop the items from automatically sliding |
|
pause | string, or the boolean false | "hover" | Pauses the carousel from going through the next slide when the mouse pointer enters the carousel, and resumes the sliding when the mouse pointer leaves the carousel Note: Set pause to false to stop the ability to pause on hover |
|
wrap | boolean | true | Specifies whether the carousel should go through all slides continuously, or stop at the last slide
|
Karusel Yöntemleri
Aşağıdaki tablo, mevcut tüm karusel yöntemlerini listeler.
Method | Description | Try it |
---|---|---|
.carousel(options) | Activates the carousel with an option. See options above for valid values | |
.carousel("cycle") | Goes through the carousel items from left to right | |
.carousel("pause") | Stops the carousel from going through items | |
.carousel(number) | Goes to a specified item (zero-based: first item is 0, second item is 1, etc..) | |
.carousel("prev") | Goes to the previous item | |
.carousel("next") | Goes to the next item |
Dönen Etkinlikler
Aşağıdaki tablo, mevcut tüm carousel olaylarını listeler.
Event | Description | Try it |
---|---|---|
slide.bs.carousel | Occurs when the carousel is about to slide from one item to another | |
slid.bs.carousel | Occurs when the carousel has finished sliding from one item to another |
Daha fazla örnek
Slaytların Alt Yazıları
Her slayt için bir başlık oluşturmak için her <div class="carousel-caption">
birinin içine ekleyin :<div
class="item">
Örnek
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img_chania.jpg" alt="Chania">
<div class="carousel-caption">
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div class="item">
<img src="img_chania2.jpg" alt="Chania">
<div class="carousel-caption">
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div class="item">
<img src="img_flower.jpg" alt="Flower">
<div class="carousel-caption">
<h3>Flowers</h3>
<p>Beautiful flowers in Kolymbari, Crete.</p>
</div>
</div>
<div class="item">
<img src="img_flower2.jpg" alt="Flower">
<div class="carousel-caption">
<h3>Flowers</h3>
<p>Beautiful flowers in Kolymbari, Crete.</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>