it-swarm.com.de

Ändern Sie Bootstrap 4 Carousel Control Colors

Ich verwende einen weißen Hintergrund für ein Karussell mit Bootstrap 4.0 und möchte die Farbe der Steuerelemente ändern. Es scheint, dass bootstrap jetzt SVG für ihre Karussellsymbole: Dies bedeutet, dass das direkte Ändern der Attribute nicht funktioniert.

Ich verwende Font Awesome derzeit auch für andere Elemente auf der Website. Wenn es also eine Möglichkeit gibt, Fa- Chevrons zu verwenden und diese stattdessen zu formatieren, und dies auch in Bezug auf Größenänderung und Formatierung, ist dies möglicherweise eine effektive Lösung Gut.

Hier ist mein aktueller Code für die Steuerelemente:

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

Ich fand eine ähnliche Frage hier , konnte aber keinen Sinn aus der dort gegebenen Antwort ziehen.

Ich habe auch die Seite this auf GitHub gefunden, konnte dort aber auch keine Antwort für mich finden.

15
Ben Kramer

Es sind keine unnötigen CSS-Hacks erforderlich.

Wenn Sie Bootstrap CSS (oder insbesondere die Farben des Karussell-Steuerelements) ändern möchten, können Sie dies problemlos tun.

Hier sind die Regeln, die die Farbe der Karussell-Steuerelemente steuern:

.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");
}

Ersetzen Sie das fff im fill='%23fff' Teile mit dem Hex-Code der gewünschten Farbe.

Hier ist ein funktionierender Codeausschnitt, in dem fill='%23fff' wurde ersetzt durch fill='%23f00' für rot statt weiß:

<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

Fügen Sie einfach Ihr eigenes Symbol in das carousel-control-next & carousel-control-prev Klasse. Zum Beispiel möchte ich das vorherige und nächste Symbol mit den Symbolen Font-Awesome ändern. Ich kann dies tun:

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

Hoffe es löst dein Problem

1
Lintang Wisesa