0
votes

Carousel Bootstrap - comment changer la couleur des flèches?

J'ai créé un diaporama avec l'aide de Carousel Bootstrap.
Mais je ne pouvais pas changer la couleur des flèches.
Pouvez-vous m'aider à savoir comment changer la couleur des flèches? Merci!
slideshow.component.html:

.picsum-img-wrapper{
    background-color: #D4DADE ; 
}
.carousel-control-next-icon{ 
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='w3.org/2000/svg' fill='%23FF0000' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
 } 
 .carousel-control-prev-icon{ 
     background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='w3.org/2000/svg' fill='%23FF0000' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
}

slideshow.component.css:

<div class="container">
  <div class="row">
    <div class="col-md-2">
    </div>
    <div class= "col-md-8">
      <ngb-carousel id="carousel_1" #carousel="ngbCarousel" class="text-lg-center" #myCarousel="ngbCarousel" showNavigationArrows="true"
        interval="2500" pauseOnHover="false">
        <ng-template ngbSlide *ngFor="let image of images;let i = index" id="{{i}}">
          <div class="picsum-img-wrapper">
            <img [src]="image" alt="Random first slide"  style=" max-height:300px; margin:0 auto;">
          </div>
          <div class="carousel-caption">
            <h6>{{titles[i]}}</h6>
          </div>
          <a class="carousel-control-prev" href="#carousel_1" data-slide="prev">
            <span class="carousel-control-prev-icon"></span>
          </a>
          <a class="carousel-control-next" href="#carousel_1" data-slide="next">
            <span class="carousel-control-next-icon"></span>
          </a>
        </ng-template>
      </ngb-carousel>
    </div>
    <div class="col-md-2">
    </div>
  </div>
</div>

angular html css carousel

7 commentaires

Si cela utilise n'importe quel type de police d'icônes, vous voudrez probablement spécifier la couleur du texte pour .carusel-control-next-icon .

Vous pouvez vous référer à cette réponse de débordement de pile publiée précédemment.

Merci! @yinsweet J'ai essayé de mettre en œuvre vos suggestions, mais la couleur n'a pas encore changé. Vous avez une idée pourquoi?

avez-vous le mot-clé ! important ? si vous voulez changer la couleur, vous avez besoin de % 23 {code couleur à 6 chiffres} . Par exemple. Couleur rouge% 23FF0000

@yinsweet, Oui, j'ai écrit: .carusel-control-next span.carusel-control-next-icon {background-image: url ("data: image / svg + xml; charset = utf8,% 3Csvg xmlns = ' w3.org/2000/svg 'fill ='% 23FF0000 'viewBox =' 0 0 8 8 ' % 3E% 3C chemin d = 'M2,75 0l-1,5 1,5 2,5 2,5 2,5-2,5 2,5 1,5 1,5 4-4-4-4z' /% 3E% 3C / svg% 3E "); } .carusel-control-prev span.carusel-control-prev-icon {background-image: url ("data: image / svg + xml; charset = utf8,% 3Csvg xmlns = ' w3.org/2000/svg 'fill ='% 23FF0000 'viewBox =' 0 0 8 8 '% 3E% 3Cpath d =' M5,25 0l-4 4 4 4 1,5-1,5-2,5-2,5 2,5-2,5-1,5-1,5z '/% 3E% 3C / svg% 3E "); } ça ne marche toujours pas

Vous avez une faute d'orthographe: carusel à carousel

@yinsweet LOL merci! a mis à jour la question ci-dessus, à mon code actuel, probablement l'orthographe n'était pas la seule erreur, car cela ne fonctionne toujours pas.

3 Réponses :

0
votes

.carusel-control-prev span.carusel-control-prev-icon,
.carusel-control-next span.carusel-control-next-icon {
  color: red; 
}

4 commentaires

Merci pour votre réponse! Mais pour une raison quelconque, cela n'a pas fonctionné pour moi .. Avez-vous une idée pourquoi? @demkovych

@Mana quelle police utilise votre élément carousel-control-next-icon ?

S'il a une image d'arrière-plan, vous devez le remplacer par votre image.

J'ai défini en css que: font-family: 'Varela Round', sans-serif; et remplacé l'image d'arrière-plan par mon image, cela ne fonctionne toujours pas: \

0
votes

Dans votre css, ajoutez:

.picsum-img-wrapper{
color: #D4DADE 
}

1 commentaires

Merci pour votre réponse! Mais pour une raison quelconque, cela n'a pas fonctionné pour moi .. Avez-vous une idée pourquoi? @WorksLikeACharm

1
votes

J'ai créé des extraits de code qui modifient la couleur de l'indicateur d'icône précédent et suivant. Veuillez exécuter l'extrait de code et vous verrez que la couleur de l'icône est devenue rouge.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>


<div class="container">
  <div class="row">
    <div class="col-md-2">
    </div>
    <div class="col-md-8">
      <ngb-carousel id="carousel_1" #carousel="ngbCarousel" class="text-lg-center" #myCarousel="ngbCarousel" showNavigationArrows="true" interval="2500" pauseOnHover="false">
        <ng-template ngbSlide *ngFor="let image of images;let i = index" id="{{i}}">
          <div class="picsum-img-wrapper">
            <img [src]="image" alt="Random first slide" style=" max-height:300px; margin:0 auto;">
          </div>
          <div class="carousel-caption">
            <h6>{{titles[i]}}</h6>
          </div>
          <a class="carousel-control-prev" href="#carousel_1" data-slide="prev">
            <span class="carousel-control-prev-icon"></span>
          </a>
          <a class="carousel-control-next" href="#carousel_1" data-slide="next">
            <span class="carousel-control-next-icon"></span>
          </a>
        </ng-template>
      </ngb-carousel>
    </div>
    <div class="col-md-2">
    </div>
  </div>
</div>

body {
  background: skyblue !important;
}

span.carousel-control-next-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23ff0000' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/%3e%3c/svg%3e");
}

span.carousel-control-prev-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23ff0000' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e");

0 commentaires