web-dev-qa-db-fra.com

Changer Bootstrap 4 couleurs de contrôle du carrousel

J'utilise un fond blanc pour un carrousel avec Bootstrap 4.0 et souhaite modifier la couleur des commandes. Il semble que bootstrap utilise maintenant SVG pour leur Cela signifie que la modification directe des attributs ne fonctionne pas.

J'utilise actuellement Font Awesome pour d'autres éléments du site. Par conséquent, s'il existe un moyen d'utiliser fa-chevrons et de les formater à la place, et qu'il se comportera toujours de la même manière en ce qui concerne le redimensionnement et la mise en forme, cela pourrait être une solution efficace: bien.

Voici mon code actuel pour les éléments de contrôle:

<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>

J'ai trouvé une question similaire ici mais je n'ai pas pu comprendre la réponse fournie ici.

J'ai aussi trouvé la page this sur GitHub mais je n'ai pas été en mesure de répondre à toutes les questions.

htmlcsstwitter-bootstrapbootstrap-4carousel
15
Ben Kramer

Il n'y a pas besoin de hacks CSS inutiles.

Si vous voulez modifier un Bootstrap css (ou les couleurs de contrôle du carrousel en particulier)), vous pouvez facilement le faire.

Voici les règles qui contrôlent la couleur des commandes du carrousel:

.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' 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");
}

.carousel-control-next-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' 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");
}

Remplacez le fff dans le fill='%23fff' parties avec le code hexadécimal de la couleur souhaitée.

Voici un extrait de code de travail où fill='%23fff' a été remplacé par fill='%23f00' pour le rouge au lieu du blanc:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    
<style>
.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23f00' 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");
}

.carousel-control-next-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23f00' 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");
}
</style>

<div class="container">
    <div class="row">
        <div class="col">
            <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
                <div class="carousel-inner">
                    <div class="carousel-item active">
                        <img class="d-block w-100" src="https://placeimg.com/800/400/animals" alt="First slide">
                    </div>
                    <div class="carousel-item">
                        <img class="d-block w-100" src="https://placeimg.com/800/400/Arch" alt="Second slide">
                    </div>
                    <div class="carousel-item">
                        <img class="d-block w-100" src="https://placeimg.com/800/400/nature" alt="Third slide">
                    </div>
                </div>
                <a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
        </div>
    </div>
</div>
46
WebDevBooster

Insérez simplement votre propre icône à l'intérieur du carousel-control-next & carousel-control-prev classe. Par exemple, je veux changer l'icône prev & next avec les icônes Font-Awesome. Je peux le faire:

<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
  <!-- INSERT MY OWN PREV ICON USING FONT AWESOME  -->
  <i style="font-size: 60px" class="fas fa-arrow-alt-circle-left"></i>
  <span class="sr-only">Previous</span>
</a>

<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
  <!-- INSERT MY OWN NEXT ICON USING FONT AWESOME  -->
  <i style="font-size: 60px" class="fas fa-arrow-alt-circle-right"></i>
  <span class="sr-only">Next</span>
</a>

J'espère que ça résoudra votre problème

1
Lintang Wisesa