Carrousel avec des Vignettes dans le Bootstrap 3.0
J'ai besoin de faire Bootstrap 3.0 Carrousel pour afficher un diaporama des vignettes. Comment puis-je faire cela?
C'est une image de ce que je cherche:
C'est un exemple de travail de Bootstrap 2, mais j'en ai besoin pour Bootstrap 3.0.: Bootstrap Curseur De Vignette
- Puis-je avoir un exemple de travail de ce en html ? Tous les liens sont rompus .Merci à l'avance.
InformationsquelleAutor Martín | 2013-09-17
Vous devez vous connecter pour publier un commentaire.
Bootstrap 4 (mise à jour en 2019)
Un multi-élément carrousel peut être accompli de plusieurs façons comme expliqué ici. Une autre option est d'utiliser séparer les miniatures pour naviguer dans le carrousel de diapositives.
Bootstrap 3 (réponse originale à cette question)
Cela peut être fait à l'aide de la grille à l'intérieur de chaque carrousel élément.
Démo exemple curseur de vignette à l'aide du carrousel:
http://www.bootply.com/81478
Un autre exemple avec le carrousel des indicateurs sous forme de vignettes:
http://www.bootply.com/79859
@Skelly 's réponse est correcte. Il ne me permet pas d'ajouter un commentaire<50 rep)... mais pour répondre à votre question sur sa réponse: Dans l'exemple qu'il a lié, si vous ajoutez
classe pour chacune des vignettes, comme ceci:
alors il devrait rester à la façon dont vous le souhaitez lors de la taille vers le bas de téléphone de la largeur.
Viens de trouver un plugin pour cela:
http://flexslider.woothemes.com/
Ce qui concerne
J'utilise sur mon site (par exemple ici), mais je suis en utilisant quelques trucs supplémentaires pour faire le chargement paresseux, sens extraire le code n'est pas aussi simple que je voudrais qu'il soit pour le mettre dans un violon.
Aussi, mon moteur de template est smarty, mais je suis sûr que vous obtenez l'idée.
De la viande...
La mise à jour des indicateurs:
Changer le CSS liées aux indicateurs:
Quand le manège a glissé, mise à jour de la liste des vignettes:
Et, lorsque votre page se charge, la position de défilement des vignettes: