1. Home
  2. carrousel Bootstrap (Carousel) un widget

Le meilleur didacticiel carrousel Bootstrap (Carousel) un widget en 2024, dans ce didacticiel, vous pouvez apprendre Exemples,Exemples,Exemples,usage,options de,manière,Exemples,événement,Exemples,

carrousel Bootstrap (Carousel) un widget

Bootstrap carrousel (Carousel) plug-in est une réponse flexible au site ajouter une manière curseur de style. En outre, le contenu est assez flexible, peut être une image, cadre intégré, vidéo ou tout autre type de contenu que vous souhaitez placer.

Si vous voulez faire référence à des caractéristiques individuelles de plug-in, vous devez référencercarousel.js.Ou, comme Bootstrap plug - in Présentation du chapitre mentionné, vous pouvez vous référer àbootstrap.jsou version compressée debootstrap.min.js.

Exemples

Voici un simple glissement utilisant Bootstrap carrousel (Carousel) plug-in montre un élément de boucle de composants communs. Afin d'atteindre la rotation, il vous suffit d'ajouter le code avec cette balise. Pas besoin d'utiliser des attributs de données, seulement besoin d'un développement basé sur la classe simple peut être.

Exemples

<Div id = "myCarousel" class = "carrousel slide"> <! - Carousel (Carrousel) - Index> <Ol class = "carrousel-indicateurs"> <Li data-target = "#myCarousel" données-slide-to = "0 " class = "active"> </ li> <Li data-target = "#myCarousel" données-slide-to = "1 "> </ li> <Li data-target = "#myCarousel" données-slide-to = "2 "> </ li> </ Ol> <! - Carousel (Carousel) Projet -> <Div class = "carrousel intérieur"> <Div class = "élément actif"> <Img src = "/wp-content/uploads/2014/07/slide1.png" alt = "Première diapositive"> </ 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 = "Troisième slide"> </ Div> </ Div> <! - Carousel (Carrousel) Navigation -> <A class = "carrousel de contrôle à gauche" href = "#myCarousel" data-slide = "prev"> & lsaquo; </ A> <A class = "right carrousel contrôle" href = "#myCarousel" data-slide = "next"> & rsaquo; </ A> </ Div>

Essayez »

Les résultats sont les suivants:

carrousel Simple (Carousel) un widget

titre facultatif

Vous pouvez ajouter des légendes à une diapositive par élément.carousel-caption .itemintérieur. Seulement vous devez placer un code HTML en option à l'endroit où il sera automatiquement aligné et formaté. L'exemple suivant illustre ce point:

Exemples

<Div id = "myCarousel" class = "carrousel slide"> <! - Carousel (Carrousel) - Index> <Ol class = "carrousel-indicateurs"> <Li data-target = "#myCarousel" données-slide-to = "0 " class = "active"> </ li> <Li data-target = "#myCarousel" données-slide-to = "1 "> </ li> <Li data-target = "#myCarousel" données-slide-to = "2 "> </ li> </ Ol> <! - Carousel (Carousel) Projet -> <Div class = "carrousel intérieur"> <Div class = "élément actif"> <Img src = "/wp-content/uploads/2014/07/slide1.png" alt = "Première diapositive"> <Div class = "carrousel légende"> Titre 1 </ div> </ Div> <Div class = "item"> <Img src = "/wp-content/uploads/2014/07/slide2.png" alt = "Second slide"> <Div class = "carrousel légende"> Titre 2 </ div> </ Div> <Div class = "item"> <Img src = "/wp-content/uploads/2014/07/slide3.png" alt = "Troisième slide"> <Div class = "carrousel légende"> Titre 3 </ div> </ Div> </ Div> <! - Carousel (Carrousel) Navigation -> <A class = "carrousel de contrôle à gauche" href = "#myCarousel" data-slide = "prev"> & lsaquo; </ A> <A class = "right carrousel contrôle" href = "#myCarousel" data-slide = "next"> & rsaquo; </ A> </ Div>

Essayez »

Les résultats sont les suivants:

Carousel (Carousel) widget de titre

usage

  • Grâce à l' attribut de données:la propriété de données peut être facilement contrôlé carrousel poste (Carousel).
    • Lesdonnées d' attributs-slideaccepte mot - cléprevousuivant,pour changer la position de la lame par rapport à la position actuelle.
    • En utilisant lesdonnées-slide-passer un compagnon à la diapositive originale à l'indexde laroue,lesdonnées-slide-to = "2" va déplacer le curseur vers un index spécifique, un indice de 0 à commencer le comptage.
    • données-ride = attribut "carrousel"est utilisé pour marquer la rotation lorsque la page est chargée pour démarrer la lecture d' un film.
  • Par JavaScript: Carousel (Carrousel) peut être invoqué manuellement via JavaScript, comme suit:
    $ ( '. Carousel'). Carousel ()

options de

Il y a quelques options à travers les attributs de données ou JavaScript pour passer. Le tableau suivant présente les options suivantes:

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

manière

Voici quelques-uns du carrousel (Carousel) plug-in des moyens utiles:

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

Exemples

L'exemple suivant illustre la méthode:

Exemples

<Div id = "myCarousel" class = "carrousel slide"> <! - Carousel (Carrousel) - Index> <Ol class = "carrousel-indicateurs"> <Li data-target = "#myCarousel" données-slide-to = "0 " class = "active"> </ li> <Li data-target = "#myCarousel" données-slide-to = "1 "> </ li> <Li data-target = "#myCarousel" données-slide-to = "2 "> </ li> </ Ol> <! - Carousel (Carousel) Projet -> <Div class = "carrousel intérieur"> <Div class = "élément actif"> <Img src = "/wp-content/uploads/2014/07/slide1.png" alt = "Première diapositive"> </ 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 = "Troisième slide"> </ Div> </ Div> <! - Carousel (Carrousel) Navigation -> <A class = "carrousel de contrôle à gauche" href = "#myCarousel" data-slide = "prev"> & lsaquo; </ a> <A class = "right carrousel contrôle" href = "#myCarousel" data-slide = "next"> & rsaquo; </ a> <! - Contrôle des boutons -> <Div style = "text-align: center ;"> <entrée type = "button" class = "btn start-slide" value = "Démarrer"> <entrée type = "button" class = "btn pause-slide" value = "Pause"> <entrée type = "button" class = "btn prev-slide" value = "Diapositive précédente"> <entrée type = "button" class = "btn next-slide" value = "diapositive suivante"> <entrée type = "button" class = "btn slide-one" value = "Slide 1"> <entrée type = "button" class = "btn slide-deux" value = "Diapositive 2"> <entrée type = "button" class = "btn slide-trois" value = "Diapositive 3"> </ Div> </ Div> <Script>
$ (Function () { // Initialisation Carousel $ ( ".start-Slide") click (function () {$ ( "#myCarousel") carrousel ( «cycle») ;.}) ;. // Arrêter la rotation . $ ( ".pause-Slide" ) click (function () {. $ ( "#myCarousel") Carousel ( «pause»);}); // rotation en boucle sur un projet $ ( ".PREV-Slide") click (function () {$ ( "#myCarousel") carrousel ( 'prev') ;.}) ;. // cycle de rotation à l'élément suivant $ ( ".next-Slide") click (function () {$ ( "#myCarousel") carrousel ( 'next') ;.}) ;. // rotation en boucle à une image spécifique $ ( ".slide-One") cliquez sur. (Function () {$ ( "#myCarousel") carrousel (0) ;.}) ;. $ ( ".slide-Two") click (function () {$ ( "#myCarousel") carrousel (1) ;.}); $ ( ".slide-trois") click (function () {$ ( "#myCarousel") carrousel (2); fr});});
</ Script>

Essayez »

Les résultats sont les suivants:

Carousel (Carousel) méthode plug-in

événement

Le tableau suivant présente le carrousel (Carousel) plug-in pour être utilisé dans l'événement. Ces événements peuvent être utilisés lorsque la fonction de crochet.

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

Exemples

L'exemple suivant illustre l'utilisation de l'événement:

Exemples

<Div id = "myCarousel" class = "carrousel slide"> <! - Carousel (Carrousel) - Index> <Ol class = "carrousel-indicateurs"> <Li data-target = "#myCarousel" données-slide-to = "0 " class = "active"> </ li> <Li data-target = "#myCarousel" données-slide-to = "1 "> </ li> <Li data-target = "#myCarousel" données-slide-to = "2 "> </ li> </ Ol> <! - Carousel (Carousel) Projet -> <Div class = "carrousel intérieur"> <Div class = "élément actif"> <Img src = "/wp-content/uploads/2014/07/slide1.png" alt = "Première diapositive"> </ 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 = "Troisième slide"> </ Div> </ Div> <! - Carousel (Carrousel) Navigation -> <A class = "carrousel de contrôle à gauche" href = "#myCarousel" data-slide = "prev"> & lsaquo; </ a> <A class = "right carrousel contrôle" href = "#myCarousel" data-slide = "next"> & rsaquo; </ a> </ Div> <Script>
$ (Function () {$ ( '#myCarousel') On ( 'slide.bs.carousel', fonction. () { alert ( "lorsque la méthode d'instance de glissement invoqué immédiatement déclenché l'événement.");});});
</ Script>

Essayez »

Les résultats sont les suivants:

Carousel (Carousel) Plug-in Event

Hot Didacticiel

Nous contacter

carrousel Bootstrap (Carousel) un widget
10/30