Carrousel Utilisant Javascript

| | | | | | | | | | | | | | | | | | | | | | |

Lorsque nous pensons à un manège, nous pensons généralement au manège de parc d`attractions que vous avez peut-être fait dans votre enfance - une grande plate-forme rotative avec des chevaux de manège colorés qui montent et descendent comme vous allez. au fur et à mesure que le manège progresse.

Un manège Bootstrap n`est pas la variété foraine que nous avons apprise lorsque nous étions enfants, mais le concept présente certaines similitudes. Cet article explique comment démarrer avec Bootstrap, explique ce qu`est l`élément d`interface utilisateur du carrousel, quand il doit être utilisé et comment en créer un à l`aide du framework Bootstrap.

Mise en route

La première chose que nous devons faire pour configurer un carrousel Bootstrap est de nous assurer que nous avons les bonnes dépendances. Pour cela, nous avons besoin de Bootstrap, PopperJS et jQuery. Visitez Bootstrap Quickstart pour vous aider à ajouter vos dépendances à votre projet.

La façon de gérer les exigences de dépendance dépend de vous, mais la manière la plus simple et la plus conviviale pour les débutants est d`utiliser le réseau de diffusion de contenu & ndash ; le CDN - pour jQuery, Popper.js et Bootstrap. Faites attention à l`ordre des balises < script src = "https: //stack.bootstrapcdn4.bootstrap/integrity.bootpath. =" sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf / nJGzIxFDsf4x; RMltonymous; La chose importante à comprendre sur le fonctionnement des contrôles est que le href doit correspondre à l`identifiant unique du carrousel global div.

Vérification suivante :


Conteneur le plus externe du carrousel :

Financement du Bootcamp Diplômés et anciens élèves du Bootcamp

  • couvercle HTML CSS JS Python Rubis C++ Java
  • Actualités et avis
  • Précédent Suivant < /a>

    La liste triée dans l`extrait de code ci-dessus est celle-ci un drapeaux. La classe .active correspond à la classe active dans les carousel-items.

    : 1em ; "> " PLUS : Sélecteur d`attribut CSS

    Conclusion

    Au début, cela peut sembler BEAUCOUP d`informations à assimiler. La principale chose à retenir est de simplement suivre la documentation. Il n`est pas nécessaire de mémoriser comment le faire lorsque la documentation est si bien écrite et détaillée.

    C`est certainement une bonne idée de savoir comment tout fonctionne sur Bootstrap - consultez ces CSS et JS minifiés si vous avez le temps de voir à quoi ressemblent les éléments stylés et scriptés dans Bootstrap. , gardez au moins à l`esprit la signification de tous les attributs de l`exemple de code afin de pouvoir l`adapter à vos besoins et l`utiliser dans votre projet.

    Une dernière chose : gardez à l`esprit que le composant carrousel n`est peut-être pas le meilleur à utiliser en termes d`accessibilité.Assurez-vous de continuer à rendre votre page aussi accessible que possible et n`utilisez pas d`informations dans votre carrousel qui ne peuvent être trouvées ailleurs.

    Bonne chance dans la poursuite de votre parcours utilisateur Bootstrap !