Bootstrap 3 default Carousel: Comment déplacer les indicateurs vers le bas et à l’extérieur du conteneur de diapositives?

Qu’est-ce qu’un moyen facile (et propre) de déplacer les indicateurs de carrousel de Bootstrap 3 vers le bas et à l’extérieur du conteneur de diapositives afin qu’il ne soit pas superposé sur les photos? Voir l’image ci-dessous sur l’endroit où je veux déplacer les indicateurs.

Lien vers le code en direct

entrer la description de l'image ici

 

Vous pouvez les pousser sous le curseur comme ceci …

 .carousel-indicators { bottom:-50px; } 

Laissez un espace sous le carrousel pour que les indicateurs poussés n’interfèrent pas avec le contenu sous le curseur.

 .carousel-inner { margin-bottom:50px; } 

Démo Bootply

vous pouvez simplement append la classe bootstrap cachée après la classe d’indicateur comme ceci:

  

Personnalisez votre div de classe d’articles

  
 
your content
 

cela a fonctionné pour moi quand je ne veux pas les icons sur le contenu div

Vous pouvez définir la bordure à 0px comme ceci:

 .carousel-indicators li{ border: 0px; } 

Vous pouvez écrire avec:

 .carousel-indicators { display:none; }