Changement flèche de couleurs de Bottes de carrousel
Je suis évidemment manquant quelque chose de simple ici. J'ai des images avec un fond blanc donc, je veux être en mesure de modifier les flèches sur la force du Poignet Carrousel de sorte qu'ils sont visibles. Donc, de nombreuses changer la couleur des flèches (PAS le fond comme je l'ai fait).
CSS
.carousel-control-prev-icon, .carousel-control-next-icon {
height: 100px;
width: 100px;
outline: black;
background-color: rgba(0, 0, 0, 0.3);
background-size: 100%, 100%;
border-radius: 50%;
border: 1px solid black;
}
Carrousel HTML
<div class = 'col-md-9'>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="carousel/Bars%20and%20Dots.jpg" alt="First slide" class = 'img-responsive'>
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="carousel/murial.jpg" alt="Second slide" class = 'img-responsive'>
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="carousel/Upper%20Partialism%20album%20covers004white.jpg" alt="Third slide" class = 'img-responsive'>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
Pouvez-vous fournir d'exemple, dans JSFiddle?
OriginalL'auteur Paul Young | 2017-09-16
Vous devez vous connecter pour publier un commentaire.
Je sais que c'est un vieux post, mais il m'a beaucoup aidé. J'ai également constaté que pour bootstrap v4 vous pouvez également modifier la flèche de couleur en remplaçant les commandes comme ceci:
Où vous changez
fill='%23fff'
la fff à la fin pour toute valeur hexadécimale de ce que vous voulez. Par exemple:fill='%23000'
pour le noir,fill='%23ff0000'
pour le rouge et ainsi de suite. Juste une remarque, je n'ai pas testé ce sans le !importante déclaration.OriginalL'auteur Frank A.
Si vous voulez juste faire le noir dans le Bootstrap 4.
background-image: svg...
solution.C'est la seule solution qui fonctionne pour BS4
OriginalL'auteur Chris Gunawardena
Vous devez utiliser également:
<span><i class="fa fa-angle-left" aria-hidden="true"></i></span>
à l'aide de fontawesome. Vous devez remplacer le code d'origine. Effectuez les opérations suivantes et vous serez libre de personnaliser le CSS:Le code d'origine
OriginalL'auteur Unison Tek
Actuellement Bootstrap 4 utilise une image de fond d'écran avec jouer des données SVG info qui incluent la couleur de la SVG forme. Quelque chose comme:
Note la partie sur
fill='%23fff'
il remplit la forme avec une couleur, dans ce cas #fff (blanc), pour le rouge il suffit de remplacer avec #f00Enfin, il est prudent d'inclure cette (même changement pour la prochaine icône):
OriginalL'auteur JDuarteDJ
pour bootstrap 3, on peut utiliser:
OriginalL'auteur Keshav Bhadouria
Dans le bootstrap 4 si vous êtes juste de changer la couleur des contrôles que vous pouvez utiliser sass variables, généralement dans la coutume.scss:
$carrousel-contrôle-color: #7b277d;
Comme le souligne cette github note: https://github.com/twbs/bootstrap/issues/21985#issuecomment-281402443
OriginalL'auteur Cadmium
Si vous êtes en utilisant bootstrap.min.css pour carrousel-
Ouvrir le fichier d'amorçage.min.fichier css et trouver la propriété "glyphicon-chevron-right" et ajout de la propriété "color:red"
OriginalL'auteur PADMAJA SONWANE
un petit exemple qui fonctionne pour moi
OriginalL'auteur TrinitA