Bootstrap Karuzela (Carousel) widget
Bootstrap karuzeli (Carousel) plug-in jest elastyczne reagowanie na miejscu dodać sposób suwak stylu. Ponadto, treść jest na tyle elastyczny, może być zdjęcie, osadzoną ramkę, wideo lub innego rodzaju treści, które chcesz umieścić.
Jeśli chcesz zapoznać się z poszczególnymi funkcjami typu plug-in, trzeba odwołaćcarousel.js.Albo, jak Bootstrap Przegląd wtyczki rozdziale wspomniano, można zwrócić się dobootstrap.jslub skompresowanej wersjibootstrap.min.js.
Przykłady
Oto prosty slajdów przy użyciu Bootstrap karuzeli (Carousel) plug-in pokazuje element pętli wspólnych komponentów. W celu osiągnięcia rotację, trzeba tylko dodać kod z tym tagiem. Nie ma potrzeby korzystania atrybuty danych, wystarczy proste osiedle klasa oparte może być.
Przykłady
<div id = "myCarousel" class = "karuzela slide">
<! - Carousel (Karuzela) Strona Główna ->
<ol class = "karuzeli wskaźniki">
<Li Dane-target = "#myCarousel" Dane-slide-to = "0 " class = "aktywny"> </ li>
<Li Dane-target = "#myCarousel" Dane-slide-to = "1 "> </ li>
<Li Dane-target = "#myCarousel" Dane-slide-to = "2 "> </ li>
</ Ol>
<! - Carousel (Karuzela) Projekt ->
<div class = "karuzeli wewnętrzna">
<div class = "element aktywny">
<img src = "/wp-content/uploads/2014/07/slide1.png" alt = "Pierwszy slajd">
</ Div>
<div class = "item">
<img src = "/wp-content/uploads/2014/07/slide2.png" alt = "Second slide">
</ Div>
<div class = "item">
<img src = "/wp-content/uploads/2014/07/slide3.png" alt = "Trzeci slide">
</ Div>
</ Div>
<! - Carousel (Karuzela) Nawigacja ->
<a class = "karuzela sterowania w lewo" href = "#myCarousel"
Dane-slide = "prev"> & lsaquo;
</ A>
<a class = "right karuzela-control" href = "#myCarousel"
Dane-slide = "next"> & rsaquo;
</ A>
</ Div>
Spróbuj »
Wyniki przedstawiają się następująco:
opcjonalny tytuł
Można dodawać podpisy do slajdu po elemencie.carousel-podpisu .Itemśrodku. Tylko trzeba umieszczać żadnych opcjonalnego HTML do miejsca, gdzie zostanie on automatycznie wyrównane i sformatowany. Poniższy przykład ilustruje ten punkt:
Przykłady
<div id = "myCarousel" class = "karuzela slide">
<! - Carousel (Karuzela) Strona Główna ->
<ol class = "karuzeli wskaźniki">
<Li Dane-target = "#myCarousel" Dane-slide-to = "0 " class = "aktywny"> </ li>
<Li Dane-target = "#myCarousel" Dane-slide-to = "1 "> </ li>
<Li Dane-target = "#myCarousel" Dane-slide-to = "2 "> </ li>
</ Ol>
<! - Carousel (Karuzela) Projekt ->
<div class = "karuzeli wewnętrzna">
<div class = "element aktywny">
<img src = "/wp-content/uploads/2014/07/slide1.png" alt = "Pierwszy slajd">
<div class = "karuzeli caption"> Tytuł 1 </ div>
</ Div>
<div class = "item">
<img src = "/wp-content/uploads/2014/07/slide2.png" alt = "Second slide">
<div class = "karuzeli caption"> Tytuł 2 </ div>
</ Div>
<div class = "item">
<img src = "/wp-content/uploads/2014/07/slide3.png" alt = "Trzeci slide">
<div class = "karuzeli caption"> Tytuł 3 </ div>
</ Div>
</ Div>
<! - Carousel (Karuzela) Nawigacja ->
<a class = "karuzela sterowania w lewo" href = "#myCarousel"
Dane-slide = "prev"> & lsaquo;
</ A>
<a class = "right karuzela-control" href = "#myCarousel"
Dane-slide = "next"> & rsaquo;
</ A>
</ Div>
Spróbuj »
Wyniki przedstawiają się następująco:
zwyczaj
- Poprzez danych atrybutu: nieruchomość dane mogą być łatwo kontrolowane karuzela pozycję (Karuzela).
- Atrybutdanych slajdów akceptujepoprzednielubnastępnesłowokluczowe,aby zmienić położenie względem przejdź do aktualnej pozycji.
- Wykorzystującdane-slide-zdać towarzysza oryginalnego slajdu do indeksu koła, data-slide-to = "2" będzie przesunąć suwak do określonego indeksu, indeks od 0 do rozpoczęcia liczenia.
- Dane-ride = atrybut "karuzela"jest używany do oznaczenia obrót, gdy strona jest ładowana, aby rozpocząć odtwarzanie filmu.
- Przez javascript: Karuzela (Carousel) mogą być wywoływane ręcznie poprzez JavaScript, w następujący sposób:
$ ( '. Karuzela "). Carousel ()
Opcje
Istnieje kilka opcji, dzięki atrybutów danych lub JavaScript do przejścia. Poniższa tabela zawiera następujące opcje:
| 选项名称 | 类型/默认值 | Data 属性名称 | 描述 |
|---|---|---|---|
| interval | number 默认值：5000 | data-interval | 自动循环每个项目之间延迟的时间量。如果为 false，轮播将不会自动循环。 |
| pause | string 默认值："hover" | data-pause | 鼠标进入时暂停轮播循环，鼠标离开时恢复轮播循环。 |
| wrap | boolean 默认值：true | data-wrap | 轮播是否连续循环。 |
sposób
Oto niektóre z karuzeli (Carousel) plug-in przydatnych sposobów:
| 方法 | 描述 | 实例 |
|---|---|---|
| .carousel(options) | 初始化轮播为可选的 options 对象，并开始循环项目。 |
$('#identifier').carousel({
interval: 2000
})
|
| .carousel('cycle') | 从左到右循环轮播项目。 |
$('#identifier').carousel('cycle')
|
| .carousel('pause') | 停止轮播循环项目。 |
$('#identifier').carousel('pause') |
| .carousel(number) | 循环轮播到某个特定的帧（从 0 开始计数，与数组类似）。 |
$('#identifier').carousel(number) |
| .carousel('prev') | 循环轮播到上一个项目。 |
$('#identifier').carousel('prev') |
| .carousel('next') | 循环轮播到下一个项目。 |
$('#identifier').carousel('next') |
Przykłady
Poniższy przykład demonstruje sposób:
Przykłady
<div id = "myCarousel" class = "karuzela slide">
<! - Carousel (Karuzela) Strona Główna ->
<ol class = "karuzeli wskaźniki">
<Li Dane-target = "#myCarousel" Dane-slide-to = "0 "
class = "aktywny"> </ li>
<Li Dane-target = "#myCarousel" Dane-slide-to = "1 "> </ li>
<Li Dane-target = "#myCarousel" Dane-slide-to = "2 "> </ li>
</ Ol>
<! - Carousel (Karuzela) Projekt ->
<div class = "karuzeli wewnętrzna">
<div class = "element aktywny">
<img src = "/wp-content/uploads/2014/07/slide1.png" alt = "Pierwszy slajd">
</ Div>
<div class = "item">
<img src = "/wp-content/uploads/2014/07/slide2.png" alt = "Second slide">
</ Div>
<div class = "item">
<img src = "/wp-content/uploads/2014/07/slide3.png" alt = "Trzeci slide">
</ Div>
</ Div>
<! - Carousel (Karuzela) Nawigacja ->
<a class = "karuzela sterowania w lewo" href = "#myCarousel"
Dane-slide = "prev"> & lsaquo; </ a>
<a class = "right karuzela-control" href = "#myCarousel"
Dane-slide = "next"> & rsaquo; </ a>
<! - Przyciski sterowania ->
<div style = "text-align: center ;">
<Wejście type = "link" class = "btn uruchomienie slide" value = "Start">
<Wejście type = "link" class = "btn pauza-slide" value = "Pauza">
<Wejście type = "link" class = "btn prev-slide" value = "Poprzedni slajd">
<Wejście type = "link" class = "btn next-slide" value = "Następny slajd">
<Wejście type = "link" class = "btn slide-one" value = "Slide 1">
<Wejście type = "link" class = "btn slide-dwa" value = "Slide 2">
<Wejście type = "link" class = "btn slide-trzy" value = "Slide 3">
</ Div>
</ Div>
<Script>
$ (Function () {
// Inicjalizacja Karuzela $ ( ".start-Slide") click (function () {$ ( "#myCarousel") karuzela ( "cykl") ;.}) ;. // obrót Zatrzymaj . $ ( ".pause-Slide" ) click (function () {. $ ( "#myCarousel") Karuzela ( "pause");}); // obrót pętli nad projektem $ ( ".prev-Slide") click (function () {$ ( "#myCarousel") karuzela ( "wstecz") ;.}) ;. // Cykl rotacji do następnego elementu $ ( ".next-Slide") click (function () {$ ( "#myCarousel") karuzela ( "Next") ;.}) ;. // obrót pętli do konkretnej ramce $ ( ".slide-One") kliknij. (Function () {$ ( "#myCarousel") karuzela (0) ;.}) ;. $ ( ".slide-Two") click (function () {$ ( "#myCarousel") karuzela (1) ;.}); $ ( ".slide trzy") click (function () {$ ( "#myCarousel") karuzela (2); ..});});
</ Script>
Spróbuj »
Wyniki przedstawiają się następująco:
wydarzenie
Poniższa tabela zawiera karuzelę (Karuzela) plug-in do wykorzystania w tym wydarzeniu. Zdarzenia te mogą być wykorzystywane, gdy funkcja haka.
| 事件 | 描述 | 实例 |
|---|---|---|
| slide.bs.carousel | 当调用 slide 实例方法时立即触发该事件。 |
$('#identifier').on('slide.bs.carousel', function () {
// 执行一些动作...
})
|
| slid.bs.carousel | 当轮播完成幻灯片过渡效果时触发该事件。 |
$('#identifier').on('slid.bs.carousel', function () {
// 执行一些动作...
})
|
Przykłady
Poniższy przykład demonstruje użycie tego wydarzenia:
Przykłady
<div id = "myCarousel" class = "karuzela slide">
<! - Carousel (Karuzela) Strona Główna ->
<ol class = "karuzeli wskaźniki">
<Li Dane-target = "#myCarousel" Dane-slide-to = "0 "
class = "aktywny"> </ li>
<Li Dane-target = "#myCarousel" Dane-slide-to = "1 "> </ li>
<Li Dane-target = "#myCarousel" Dane-slide-to = "2 "> </ li>
</ Ol>
<! - Carousel (Karuzela) Projekt ->
<div class = "karuzeli wewnętrzna">
<div class = "element aktywny">
<img src = "/wp-content/uploads/2014/07/slide1.png" alt = "Pierwszy slajd">
</ Div>
<div class = "item">
<img src = "/wp-content/uploads/2014/07/slide2.png" alt = "Second slide">
</ Div>
<div class = "item">
<img src = "/wp-content/uploads/2014/07/slide3.png" alt = "Trzeci slide">
</ Div>
</ Div>
<! - Carousel (Karuzela) Nawigacja ->
<a class = "karuzela sterowania w lewo" href = "#myCarousel"
Dane-slide = "prev"> & lsaquo; </ a>
<a class = "right karuzela-control" href = "#myCarousel"
Dane-slide = "next"> & rsaquo; </ a>
</ Div>
<Script>
$ (Function () {$ ( '#myCarousel "). Na (" slide.bs.carousel', funkcja () {
alert ( "gdy metoda instancji slajdów wywoływana natychmiast wywołał zdarzenie.");});});
</ Script>
Spróbuj »
Wyniki przedstawiają się następująco:
