Bootstrap Carousel Indicators austauschen

Elly · 1. März 2021

Mein Carousel verwendet momentan die Standard-Indicators. Da mir die Pfeile aber zu kantig sind, würde ich sie gerne austauschen.

Dazu habe ich fogendes gefunden. Also gehen tut es...

Mit meiner SVG schaffe ich das aber nicht.

Ich hab im Original Bootstrap Indicator CSS nur den Data-Wert gegen meinen ausgetauscht, trotzdem wird mir immer noch das Original von Bootstrap angezeigt. Wenn ich die SVG direkt als url einbinde, wird mir gar nichts angezeigt, egal ob ich Schwarz oder Weiß als Farbe verwende.

Original Bootstrap:

Code

.carousel-control-prev-icon {
background-image: url("data:image/svg+xml,%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");
}

Meine SVG;

XML

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="257.57px" height="451.847px" viewBox="97.138 0 257.57 451.847" enable-background="new 97.138 0 257.57 451.847"
     xml:space="preserve">
<g>
    <path fill="#FFFFFF" d="M97.138,225.919c0-8.095,3.085-16.186,9.262-22.365L300.687,9.269c12.359-12.359,32.396-12.359,44.75,0
        c12.354,12.354,12.354,32.389,0,44.748L173.528,225.92l171.914,171.909c12.354,12.354,12.354,32.391,0,44.744
        c-12.354,12.365-32.392,12.365-44.75,0L106.404,248.292C100.229,242.115,97.138,234.018,97.138,225.919z"/>
</g>
</svg>

Alles anzeigen

Sempervivum · 1. März 2021

Meine Kenntnisse was SVG betrifft sind begrenzt und es ist mir nicht gelungen, deine SVGs als data-URLs einzubinden. Da Du sie in Dateiform hast, empfehle ich, einfach die Dateien als Hintergrundbild einzubinden.

Elly · 1. März 2021

Das hatte ich ja auch schon probiert, aber wie gesagt wurde mir dann gar kein Indicator angezeigt.

basti1012 · 1. März 2021

Lösch doch mal deine Cache und kucke in die Console ob die Bilder auch geladen werden und du da kein Buchstaben dreher drinne hast

Sempervivum · 1. März 2021

Bei mir funktioniert es, ich habe nur den Pfeil schwarz gemacht, damit man ihn besser erkennt:

html-seminar.de/woltlab/attachment/2916/

basti1012 · 2. März 2021

Du weißt auch das du die SVG Datein so einbinden kannst

CSS

.carousel-control-prev-icon {
      background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="97.138 0 257.57 451.847" fill="%23FFFFFF">   <path d="M97.138,225.919c0-8.095,3.085-16.186,9.262-22.365L300.687,9.269c12.359-12.359,32.396-12.359,44.75,0   c12.354,12.354,12.354,32.389,0,44.748L173.528,225.92l171.914,171.909c12.354,12.354,12.354,32.391,0,44.744   c-12.354,12.365-32.392,12.365-44.75,0L106.404,248.292C100.229,242.115,97.138,234.018,97.138,225.919z"/></svg>') !important;
}

.carousel-control-next-icon {
     background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="97.138 0 257.57 451.847" fill="%23FFFFFF"><path d="M345.441,248.292L151.154,442.573c-12.359,12.365-32.397,12.365-44.75,0c-12.354-12.354-12.354-32.391,0-44.744 L278.317,225.92L106.409,54.017c-12.354-12.359-12.354-32.395,0-44.748c12.354-12.359,32.391-12.359,44.75,0l194.287,194.284 c6.177,6.18,9.262,14.271,9.262,22.365C354.708,234.018,351.617,242.115,345.441,248.292z"/></svg>') !important;
}

Ist so vielleicht nicht so fehleranfällig, weil du die Zeichen ( < , > , / , # ) nicht umschreiben musst.

Wie du siehst, http://sebastian1012.bplaced.net/test.php/svg-in-slider.php geht das auch.

Bei mir sollte es auch ohne Import gehen, weil es im <style> Tag steht.

Du hast die Pfeile ja in der bootstrap_carussel und einmal in der bootstrap.min stehen, keine Ahnung wie da die Wertigkeit ist.

basti1012 · 2. März 2021

Ich sehe gerade das es jetzt auch so geht wie du es vor hattest

HTML

<style>
.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='97.138 0 257.57 451.847'%3E%3Cpath  fill='%23FFFFFF' d='M97.138,225.919c0-8.095,3.085-16.186,9.262-22.365L300.687,9.269c12.359-12.359,32.396-12.359,44.75,0   c12.354,12.354,12.354,32.389,0,44.748L173.528,225.92l171.914,171.909c12.354,12.354,12.354,32.391,0,44.744   c-12.354,12.365-32.392,12.365-44.75,0L106.404,248.292C100.229,242.115,97.138,234.018,97.138,225.919z'/%3E%3C/svg%3E");
}
.carousel-control-next-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='97.138 0 257.57 451.847'%3E%3Cpath  fill='%23FFFFFF' d='M345.441,248.292L151.154,442.573c-12.359,12.365-32.397,12.365-44.75,0c-12.354-12.354-12.354-32.391,0-44.744    L278.317,225.92L106.409,54.017c-12.354-12.359-12.354-32.395,0-44.748c12.354-12.359,32.391-12.359,44.75,0l194.287,194.284    c6.177,6.18,9.262,14.271,9.262,22.365C354.708,234.018,351.617,242.115,345.441,248.292z'/%3E%3C/svg%3E");
}
</style>

Ich hoffe, ich sage jetzt kein Mist, aber wenn man das

CSS

fill='%23FFFFFF'

so schreibt

CSS

fill='#FFFFFF'

Geht es schon nicht mehr.

Ich finde SVG eigentlich recht Geil, aber schon recht kompliziert. Das wird auf jeden Fall nicht mein Lieblings Thema, da gibt es welche die dafür ein besseres Händchen haben.

MrMurphy · 2. März 2021

Ich habe mal ein Online-Beispiel bei W3SCHOOLS mit meiner Vorgehensweise bei solchen Problemen erstellt.

1. Die SVG-Dateien werden direkt in den HTML-Quelltext eingefügt. Dazu ein paar Infos um den Inhalt der Datei auch später nachvollziehen zu können.

2. Ein Bootstrap-Carousel mit Ellys HTML-Quelltext wird erstellt und hinzugefügt.

3. Das Carousel wird kopiert und mit dem Änderungen des Online-Beispiels versehen.

4. Das Corousel wird erneut kopiert und die beiden Grafiken des Online-Beispiels werden durch die gewünschten Pfeile ersetzt. Das ist dann gleichzeitig das Ergebnis.

Bei Problemen kann ich so immer testen und ausprobieren ab wo sie auftreten.

https://www.w3schools.com/

Lokal und auch online vor dem Speichern bei W3SCHOOLS hat die Datei immer funktioniert. Nach dem Speichern hat W3SCHOOLS offensichtlich Schwierigkeiten die korrekt anzuzeigen. Der Quelltext kann aber direkt übernommen und lokal gestartet werden. Ich habe in die Datei einen entsprechenden Hinweis geschrieben.

Oder man markiert und kopiert den gesamten Quelltext, klickt links oben auf den Home-Button, öffnet mit Klick auf "Try it youtself" (grün) einen leeren Editor, löscht die Vorgaben und fügt den Quelltext dort ein. Nach Klick auf "Run" wurde die Seite bei mir immer korrekt angezeigt.

Elly · 5. März 2021

Aaaalso, nun nochmal dazu.

Ist ja interessant, dass das bei Sempervivum geklappt hat. Scheint ja mein Code zu sein. Ich lade meine Seiten meistens komplett neu, da da öfter mal was aus dem Cache geladen wird und dann nicht aktualisiert ist. Und beim URL einbinden hatte ich sicher auch keinen Drehen drin. Ich kann mir vorstellen, dass ich aber mit dem SVG-Code (nicht URL) zu viel rumgewurschtelt habe. Ganz sicher hab ich schon mal die viewBox nicht geändert, sondern nur den data-Teil.

Das mit dem %23 muss mal auch erstmal raffen. Der mag tatsächlich kein #. Aus URLs mit Leerzeichen kennt man ja %20, aber dass das so und nur so und nicht anders geht...

Das ist, was ich vorhatte:

Code

background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3e%3cpath d='M97.138,225.919c0-8.095,3.085-16.186,9.262-22.365L300.687,9.269c12.359-12.359,32.396-12.359,44.75,0 c12.354,12.354,12.354,32.389,0,44.748L173.528,225.92l171.914,171.909c12.354,12.354,12.354,32.391,0,44.744 c-12.354,12.365-32.392,12.365-44.75,0L106.404,248.292C100.229,242.115,97.138,234.018,97.138,225.919z");

Da habe ich aber nur Data geändert und nicht die viewBox.

Was hat Sempervivum denn da noch großartig getan? Mit dem Code hier wird mir jedenfalls nichts angezeigt. Auch in Schwarz nicht, denn dazu muss ich ja nur %23000 ändern.

Was Mr Murphy und Basti gemacht haben, funktioniert bei mir beides. Ob das nun an der viewBox liegt oder an noch was Zusätzlichem, lass ich mal offen.

Eine Frage hätte ich nun noch. Warum important? Ohne geht's auch. Ich lade das CSS ja nach dem Bootstrap, daher wird das ja eh überschrieben.

Danke jedenfalls, es klappt jetzt!

Schau an!

Bootstrap Carousel Indicators austauschen

Jetzt mitmachen!

Teilen