Carrousel bootstrap 3 exemples. Créez votre propre curseur sur Bootstrap en quelques étapes simples. Nécessite un élément actif initial

À partir du code ci-dessus, nous pouvons voir que le curseur Bootstrap 3 est divisé en plusieurs parties :

• Panneaux d'affichage
• Contenu du curseur
• Contrôles

Pour restituer un élément div dans le slider, on ajoute les noms de classes : carrousel Et glisser. Classe carrousel crée un effet « carrousel », c'est-à-dire qu'il change les diapositives en cercle. Classe glisser ajoute une animation coulissante depuis le côté droit ou gauche. Les pointeurs sont de petits cercles au bas du curseur ; ils déterminent la position actuelle de la diapositive et le nombre de diapositives. Les index sont créés à l'aide d'une liste ordonnée.

Une liste ordonnée a une classe indicateurs de carrousel, qui transforme les éléments enfants en petits cercles. Chaque élément li doit avoir un attribut cible de données avec l'ID du conteneur parent. Il doit également avoir l'attribut données-glisser vers avec une valeur numérique unique, pour faire référence à une diapositive spécifique, les valeurs doivent commencer par "0".

...


...

Chaque élément avec une classe article comporte deux sous-sections : image Et légende du carrousel. L'image est utilisée comme arrière-plan de la diapositive. Élément avec classe légende du carrousel situé au-dessus de l’image et utilisé comme titre de la diapositive. À l'intérieur légende du carrousel, nous pouvons ajouter soit des balises, soit même les deux.

Le contrôle est assuré par les flèches gauche et droite, qui sont utilisées pour changer manuellement les diapositives.

Il devrait y avoir deux éléments : un pour chaque direction. Le premier élément aura portéeélément avec des classes glyphicon glyphicon-chevron-gauche qui est une icône de flèche gauche et le deuxième élément aura des classes glyphicon glyphicon-chevron-droite, c'est la flèche droite. Dans Bootstrap, nous pouvons utiliser des polices au lieu d'images pour afficher des icônes.

C'est tout! Vous avez créé avec succès un slider pour votre site Web. De plus, vous n'avez pas écrit une seule ligne de code JavaScript, mais bootstrap.js a tout fait pour vous.

Pour personnaliser davantage le curseur, vous pouvez ajouter plusieurs attributs données-* pour le conteneur de carrousel parent.

• "intervalle de données" est utilisé pour spécifier l'intervalle de temps entre les diapositives de commutation. Il prend une valeur numérique et le nombre doit être en millisecondes.
• "pause des données" est utilisé pour déterminer quand l'événement de pause sera déclenché. Par exemple, quand il est " flotter", la commutation des diapositives s'arrête lorsque la souris est sur le curseur.
• "enveloppe de données" est un attribut booléen qui vous permet de définir si le changement de diapositive doit reprendre si la fin de la liste des diapositives est atteinte.

Si vous souhaitez utiliser les attributs jQuery et data-*, Bootstrap permet l'initialisation à l'aide de JavaScript. Pour ce faire vous pouvez écrire le code suivant :

$(".carrousel") .carrousel() ;

Les paramètres du carrousel peuvent être définis à l’aide des options. Par exemple:

$(".carrousel") .carrousel ((
intervalle : 2000
pause : "survoler",
enveloppe : vrai
} ) ;

Vous pouvez également déclencher manuellement des événements de curseur à l'aide du code suivant :

• .carousel("pause") // pause
• .carousel("cycle") // active les diapositives
• .carousel(3) // affiche la quatrième diapositive
• .carousel("prev") // afficher la diapositive précédente
• .carousel("next") // afficher la diapositive suivante

Les méthodes ci-dessus peuvent être appelées à partir de n'importe quel code JavaScript pour contrôler le fonctionnement normal du curseur. Je trouve les méthodes prev et next très utiles si je souhaite afficher mes propres boutons au lieu des flèches standard. Surtout quand ils sont en dehors de la disposition du carrousel.

Cet article devrait être utile à ceux qui souhaitent apprendre à créer un slider sans écrire des milliers de lignes de code en JavaScript. Sans aucun doute, cela accélérera le développement. Mieux encore, cette solution est compatible avec tous les navigateurs, vous n'aurez donc pas à vous arracher les cheveux pour la faire fonctionner sur des navigateurs plus anciens.

Si vous avez des questions, nous vous recommandons d'utiliser notre

Bonne journée à tous ceux qui souhaitent apprendre quelque chose de nouveau grâce aux éléments du framework Bootstrap. Le sujet d'aujourd'hui sera le curseur Bootstrap Carousel. Il s’agit d’un élément populaire présent sur presque tous les sites Web.

Par conséquent, je vais vous expliquer comment créer un curseur « Carrousel », de quels outils intégrés vous aurez besoin pour cela, comment configurer les paramètres, et à la fin de l'article je vous montrerai la mise en œuvre d'un exemple spécifique . Passons maintenant aux choses sérieuses !

Une galerie photo de type « Carrousel » permet de présenter de nouvelles offres, des produits, une liste des promotions en cours, une visualisation pratique d'un portfolio, etc. Par conséquent, il est important aujourd’hui de pouvoir travailler avec ce plugin sous le nom officiel Bootstrap Carousel Plugin.

Il convient de noter immédiatement que l'élément décrit n'est pas correctement pris en charge dans Internet Explorer 9 et les versions antérieures. Cependant, cela fonctionne très bien (pour WordPress, Joomla! et d'autres moteurs, la connexion du framework est assez simple).

Afin d'utiliser facilement tous les paramètres et de personnaliser rapidement le curseur, vous devez apprendre les principales classes intégrées de Bootstrap 3.

De plus, il convient de connaître d’autres caractéristiques de la disposition de ces galeries.

Pour commencer, la création du bloc « Carousel » lui-même nécessite la déclaration de id="myCarousel" pour que ce dernier fonctionne correctement.

Dans le même div, vous devez ajouter l'attribut data-ride="carousel", qui indique que l'animation doit se charger immédiatement avec le chargement de la page.

Passons maintenant aux indicateurs. Dans chaque balise li, il convient d'ajouter quelques attributs : data-target, qui indique l'identifiant d'un « Carrousel » spécifique, et data-slide-to, qui détermine le numéro de trame auquel accéder.

Quant aux boutons qui font avancer ou reculer les images, pour les implémenter, il vaut la peine d'ajouter l'attribut data-slide avec le mot-clé « prev » ou « next ».

Vous connaissez maintenant les éléments de base du framework, grâce auxquels vous pouvez modifier l'affichage du curseur d'une certaine manière. Naturellement, vous pouvez désactiver le défilement automatique des cadres, les légendes des images ou les boutons latéraux.

En plus d'utiliser les classes intégrées dans Bootstrap, vous pouvez vous tourner vers . Ainsi, il existe de nombreuses méthodes et options dans JS qui implémentent toutes les mêmes actions, uniquement via l'outil $.carousel(). Parmi eux figurent les suivants :

Eh bien, il est maintenant temps de vérifier comment vous maîtrisez la matière et de consolider les connaissances acquises. Pour ce faire, je décrirai chaque action que vous devrez entreprendre pour créer un carrousel.

Vous devez d'abord connecter les scripts et les styles requis. Je préfère, mais vous pouvez télécharger le framework depuis le site officiel (http://getbootstrap.com/) et placer les fichiers téléchargés à la racine du répertoire du projet.

Si vous êtes d'accord avec moi, alors dans l'en-tête du document, nous écrivons :

Si vous êtes partisan de la deuxième méthode, au lieu de la première partie du lien, vous devez insérer le chemin d'accès au fichier.

Il ne reste plus qu'à l'implémenter dans le slider. Pour cela, utilisez vos connaissances acquises et rédigez les morceaux de code nécessaires pour :