Share
L'une des nombreuses fonctionnalités pratiques de Twitter Bootstrap est un carrousel coulissant pour afficher des images et du contenu! L'installation n'est pas difficile. Il nécessite un balisage structuré, le plugin Bootstrap jQuery et quelques lignes de JavaScript pour l'initialiser. Laisse-moi te montrer comment c'est fait!
Vous pouvez également télécharger la vidéo ou vous abonner à Webdesigntuts + screencasts via iTunes ou YouTube.!
Pour ceux d'entre vous qui apprécient les tutoriels en noir et blanc, passons en revue:
Le carrousel Bootstrap nécessite un modèle de balisage spécifique, avec les classes appropriées.
‹ ›
Texte de légende ici
Texte de légende ici
Texte de légende ici
Texte de légende ici
Une fois que nous avons fourni le balisage, nous devons initialiser le carrousel JavaScript pour pouvoir faire son travail sur ce carrousel..
Commençons par nous assurer que le JavaScript nécessaire est connecté à cette page. Vous trouverez vos liens JavaScript au bas de la page, près de la balise body fermeture.
Le moyen le plus recommandé de lier jQuery est de créer un lien vers une version hébergée sur CDN. Cela permet un téléchargement plus rapide et il est peut-être déjà mis en cache dans le navigateur de votre utilisateur..
Mais bien sûr, il serait bon d’avoir une solution de secours, afin que si quelque chose arrive à cette version hébergée sur CDN, l’utilisateur puisse l’obtenir localement à partir de vos propres fichiers de site. C’est exactement ce que les braves gens de HTML5 Boilerplate recommandent:
Notez que la première ligne rejoint la version hébergée de Google. La deuxième ligne utilise JavaScript pour vérifier que la première ligne a bien fonctionné. Sinon, il génère automatiquement un lien vers votre propre copie hébergée de jQuery, que vous avez incluse dans les fichiers de votre propre site (comme je l'ai ici)..
Une fois que nous avons lié jQuery, nous avons besoin des plugins jQuery de Bootstrap. J'ai inclus la version complète et compilée complète de tous les plugins de Bootstrap. Ainsi, mon lien ressemble à ceci:
Une fois que nous avons fourni les plugins jQuery plus Bootstrap, il ne nous reste plus qu'à initialiser le plugin Carousel pour qu'il puisse fonctionner sur notre carrousel..
En clair, cela signifie: Une fois que le document HTML est prêt, identifiez le ou les éléments avec une classe de "carrousel", et diriger le plugin carrousel pour faire son truc.
Une fois que le balisage est en place et que le code JavaScript a été correctement fourni, vous devriez pouvoir actualiser votre navigateur et voir les résultats. Chaque rotation d'image prend cinq secondes. Assurez-vous que votre souris ne survole pas le diaporama, car son chronomètre s'interrompt..
Vous pouvez ajouter des paramètres pour ajuster le temps entre le comportement de glissement du carrousel.
Par exemple, vous pouvez définir un intervalle de 2 secondes (2 000 millisecondes) comme suit:
Dans le balisage de l'étape 1 ci-dessus, j'ai utilisé des images Placehold.it. Notez que les images de 1200 pixels de large sont suffisamment grandes pour étendre la largeur maximale du site réactif Bootstrap standard. J'ai utilisé un rapport de 1200x480px simplement parce que cela me semble visuellement agréable - du moins sur mon grand moniteur!
À ce stade, vous êtes libre de:
Rappelez-vous toujours que lorsque vous essayez et corrigez des choses, l'excellente documentation de Twitter Bootstrap est votre amie. Et si vous pouvez utiliser une aide supplémentaire, de nombreuses personnes trouvent de l'aide dans le groupe d'amorçage Twitter de Google..
Regardez le résultat final.
Accentsconagua
