Latest web development tutorials

Bootstrap Karussell (Karussell) Widget

Bootstrap Karussell (Karussell) Plug-in ist eine flexible Reaktion auf die Website einen Slider-style Art und Weise hinzuzufügen. Darüber hinaus ist der Inhalt flexibel genug ist, kann ein Bild sein, eingebetteten Frame, Video oder jede andere Art von Inhalten, die Sie platzieren möchten.

Wenn Sie auf die einzelnen Plug-in - Funktionen beziehen möchten, müssen Siecarousel.js zu verweisen.Oder, wie Bootstrap - Plugin Übersicht Kapitel erwähnt, können Sie aufbootstrap.jsoder komprimierte Version vonbootstrap.min.js beziehen.

Beispiele

Hier ist eine einfache Rutsche mit Bootstrap Karussell (Karussell) Plug-in zeigt ein Schleifenelement von gemeinsamen Komponenten. Um Drehung zu erreichen, müssen Sie nur den Code mit diesem Tag hinzuzufügen. Keine Notwendigkeit, Datenattribute zu verwenden, benötigen nur eine einfache klassenbasierte Entwicklung sein kann.

Beispiele

<Div id = "myCarousel" class = "Karussell slide"> <! - Karussell (Karussell) Index -> <Ol class = "Karussell-Indikatoren"> <Li Daten-target = "#myCarousel" Daten-slide-to = "0 " class = "aktiv"> </ li> <Li Daten-target = "#myCarousel" Daten-slide-to = "1 "> </ li> <Li Daten-target = "#myCarousel" Daten-slide-to = "2 "> </ li> </ Ol> <! - Karussell (Karussell) Projekt -> <Div class = "Karussell-Innen"> <Div class = "Element aktiv"> <img src = "/wp-content/uploads/2014/07/slide1.png" alt = "Erstes Bild"> </ Div> <Div class = "Artikel"> <img src = "/wp-content/uploads/2014/07/slide2.png" alt = "Zweiter Schlitten"> </ Div> <Div class = "Artikel"> <img src = "/wp-content/uploads/2014/07/slide3.png" alt = "Third Dia"> </ Div> </ Div> <! - Karussell (Karussell) Navigation -> <A class = "Karussell-Steuerung links" href = "#myCarousel" Daten-slide = "prev"> & lsaquo; </ A> <A class = "Karussell-Steuerung rechts" href = "#myCarousel" Daten-slide = "next"> & rsaquo; </ A> </ Div>

Versuchen »

Die Ergebnisse sind wie folgt:

Einfache Karussell (Karussell) Widget

Optional Titel

Sie können.item innerhalb Beschriftungen zu einer Folie von .carousel-caption- Element hinzufügen. Nur müssen Sie alle optionalen HTML zu platzieren, wo sie automatisch ausgerichtet werden und formatiert. Das folgende Beispiel veranschaulicht diesen Punkt:

Beispiele

<Div id = "myCarousel" class = "Karussell slide"> <! - Karussell (Karussell) Index -> <Ol class = "Karussell-Indikatoren"> <Li Daten-target = "#myCarousel" Daten-slide-to = "0 " class = "aktiv"> </ li> <Li Daten-target = "#myCarousel" Daten-slide-to = "1 "> </ li> <Li Daten-target = "#myCarousel" Daten-slide-to = "2 "> </ li> </ Ol> <! - Karussell (Karussell) Projekt -> <Div class = "Karussell-Innen"> <Div class = "Element aktiv"> <img src = "/wp-content/uploads/2014/07/slide1.png" alt = "Erstes Bild"> <Div class = "Karussell-Beschriftung"> Titel 1 </ div> </ Div> <Div class = "Artikel"> <img src = "/wp-content/uploads/2014/07/slide2.png" alt = "Zweiter Schlitten"> <Div class = "Karussell-Beschriftung"> Titel 2 </ div> </ Div> <Div class = "Artikel"> <img src = "/wp-content/uploads/2014/07/slide3.png" alt = "Third Dia"> <Div class = "Karussell-Beschriftung"> Titel 3 </ div> </ Div> </ Div> <! - Karussell (Karussell) Navigation -> <A class = "Karussell-Steuerung links" href = "#myCarousel" Daten-slide = "prev"> & lsaquo; </ A> <A class = "Karussell-Steuerung rechts" href = "#myCarousel" Daten-slide = "next"> & rsaquo; </ A> </ Div>

Versuchen »

Die Ergebnisse sind wie folgt:

Karussell (Karussell) Widgettitel

Verwendung

  • Durch die Daten Attribut:Dateneigenschaft leicht werden kann Karussell (Karussell) Position gesteuert.
    • Attributdaten-slide akzeptiert Schlüsselwortprevodernebender Position des Schlittens relativ zur aktuellen Position zu ändern.
    • Mit denDaten-Einschub einen Begleiter zum ursprünglichen Folie passieren zu dem Rad - Index, Daten-slide-to = "2" wird den Schieberegler auf einen bestimmten Index zu verschieben, ein Index von 0 bis Zählen beginnen.
    • Daten-ride = "Karussell" Attribut wird verwendet , um die Drehung zu markieren , wenn die Seite geladen wird Film - Wiedergabe zu starten.
  • Durch JavaScript: Karussell (Karussell) kann manuell über JavaScript aufgerufen werden, wie folgt:
    $ ( '. Carousel'). Carousel ()

Optionen

Es gibt einige Optionen durch Datenattribute oder JavaScript zu übergeben. Die folgende Tabelle enthält die folgenden Optionen:

选项名称类型/默认值Data 属性名称描述
intervalnumber
默认值：5000		data-interval自动循环每个项目之间延迟的时间量。如果为 false，轮播将不会自动循环。
pausestring
默认值："hover"		data-pause鼠标进入时暂停轮播循环，鼠标离开时恢复轮播循环。
wrapboolean
默认值：true		data-wrap轮播是否连续循环。

Weg

Hier sind einige von dem Karussell (Karussell) Plug-in nützliche Möglichkeiten:

方法描述实例
.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')

Beispiele

Das folgende Beispiel veranschaulicht das Verfahren:

Beispiele

<Div id = "myCarousel" class = "Karussell slide"> <! - Karussell (Karussell) Index -> <Ol class = "Karussell-Indikatoren"> <Li Daten-target = "#myCarousel" Daten-slide-to = "0 " class = "aktiv"> </ li> <Li Daten-target = "#myCarousel" Daten-slide-to = "1 "> </ li> <Li Daten-target = "#myCarousel" Daten-slide-to = "2 "> </ li> </ Ol> <! - Karussell (Karussell) Projekt -> <Div class = "Karussell-Innen"> <Div class = "Element aktiv"> <img src = "/wp-content/uploads/2014/07/slide1.png" alt = "Erstes Bild"> </ Div> <Div class = "Artikel"> <img src = "/wp-content/uploads/2014/07/slide2.png" alt = "Zweiter Schlitten"> </ Div> <Div class = "Artikel"> <img src = "/wp-content/uploads/2014/07/slide3.png" alt = "Third Dia"> </ Div> </ Div> <! - Karussell (Karussell) Navigation -> <A class = "Karussell-Steuerung links" href = "#myCarousel" Daten-slide = "prev"> & lsaquo; </ a> <A class = "Karussell-Steuerung rechts" href = "#myCarousel" Daten-slide = "next"> & rsaquo; </ a> <! - Steuertasten -> <Div style = "text-align: center ;"> <Input type = "button" class = "BTN Start-slide" value = "Start"> <Input type = "button" class = "BTN Pause-slide" value = "Pause"> <Input type = "button" class = "BTN i.Vj.-slide" value = "Vorherige Folie"> <Input type = "button" class = "btn next-slide" value = "Nächste Folie"> <Input type = "button" class = "BTN Dia-one" value = "Slide 1"> <Input type = "button" class = "BTN Dia-two" value = "Slide 2"> <Input type = "button" class = "BTN Dia-drei" value = "Slide 3"> </ Div> </ Div> <Script>
$ (Function () { // Initialisieren Karussell $ ( ".start-Slide") klicken (function () {$ ( "#myCarousel") Karussell ( "Zyklus") ;.}) ;. // Rotation anhalten . $ ( ".pause-Slide" ) klicken (function () {. $ ( "#myCarousel") Karussell ( 'Pause');}); // Schleife Rotation an einem Projekt $ ( ".prev-Slide") klicken (function () {$ ( "#myCarousel") Karussell ( 'zurück') ;.}) ;. // Rotationszyklus zum nächsten Punkt $ ( ".next-Slide") klicken (function () {$ ( "#myCarousel") Karussell ( 'next') ;.}) ;. // Loop - Rotation zu einem bestimmten Rahmen $ ( ".slide-One") klicken. (Function () {$ ( "#myCarousel") Karussell (0) ;.}) ;. $ ( ".slide-Two") klicken (function () {$ ( "#myCarousel") Karussell (1) ;.}); $ ( ".slide-three") klicken (function () {$ ( "#myCarousel") Karussell (2); ..});});
</ Script>

Versuchen »

Die Ergebnisse sind wie folgt:

Karussell (Karussell) Plug-in Verfahren

Ereignis

Die folgende Tabelle zeigt das Karussell (Karussell) Plug-in für den Fall verwendet werden. Diese Ereignisse können, wenn die Hook-Funktion verwendet werden.

事件描述实例
slide.bs.carousel当调用 slide 实例方法时立即触发该事件。 
$('#identifier').on('slide.bs.carousel', function () {
	// 执行一些动作...
})
slid.bs.carousel当轮播完成幻灯片过渡效果时触发该事件。 
$('#identifier').on('slid.bs.carousel', function () {
	// 执行一些动作...
})

Beispiele

Das folgende Beispiel demonstriert die Verwendung des Ereignisses:

Beispiele

<Div id = "myCarousel" class = "Karussell slide"> <! - Karussell (Karussell) Index -> <Ol class = "Karussell-Indikatoren"> <Li Daten-target = "#myCarousel" Daten-slide-to = "0 " class = "aktiv"> </ li> <Li Daten-target = "#myCarousel" Daten-slide-to = "1 "> </ li> <Li Daten-target = "#myCarousel" Daten-slide-to = "2 "> </ li> </ Ol> <! - Karussell (Karussell) Projekt -> <Div class = "Karussell-Innen"> <Div class = "Element aktiv"> <img src = "/wp-content/uploads/2014/07/slide1.png" alt = "Erstes Bild"> </ Div> <Div class = "Artikel"> <img src = "/wp-content/uploads/2014/07/slide2.png" alt = "Zweiter Schlitten"> </ Div> <Div class = "Artikel"> <img src = "/wp-content/uploads/2014/07/slide3.png" alt = "Third Dia"> </ Div> </ Div> <! - Karussell (Karussell) Navigation -> <A class = "Karussell-Steuerung links" href = "#myCarousel" Daten-slide = "prev"> & lsaquo; </ a> <A class = "Karussell-Steuerung rechts" href = "#myCarousel" Daten-slide = "next"> & rsaquo; </ a> </ Div> <Script>
$ (Function () {$ ( '#myCarousel'). Ein ( 'slide.bs.carousel', function () { alert ( "wenn der Schieber Instanz - Methode sofort aufgerufen hat das Ereignis ausgelöst.");});});
</ Script>

Versuchen »

Die Ergebnisse sind wie folgt:

Karussell (Karussell) Plug-in-Ereignis