Slider (swiper) Pagination anpassen?

Hallo Zusammen,

für einen kleinen Webauftritt unseres Vereins, möchte ich so gut es geht mit Contao Bordmitteln
auskommen, so auch beim Einsatz des "sliders".
Besteht die Möglichkeit die "Pagination" derzeit Punkte, gegen Striche zu ändern?
Der aktive Strich sollte zudem in einer anderen Farbe dargestellt werden.

Hab zwar das zuständige js im asset Ordner gefunden, aber irgendwie steht ich mit der Anpassung etwas am Schlauch.
Es wäre nett wenn Ihr ein paar Tipps für mich hättet.

Vielen Dank
Grüße
Matthias

Zitat:

---

Zitat von Messen

Besteht die Möglichkeit die "Pagination" derzeit Punkte, gegen Striche zu ändern?
Der aktive Strich sollte zudem in einer anderen Farbe dargestellt werden.

---

Kannst du alles mit CSS machen ;)

Zitat:

---

Zitat von Messen

Hab zwar das zuständige js im asset Ordner gefunden, aber irgendwie steht ich mit der Anpassung etwas am Schlauch.
Es wäre nett wenn Ihr ein paar Tipps für mich hättet.

---

Finger weg vom assets Ordner! Darin muss/sollte nichts bearbeitet werden :)

Binde dir eine eigene CSS Datei im Layout ein und formatiere die gewünschten Elemente über diese Datei.

Erstmal vielen Dank für die schnelle Rückmeldung und
die Info dies nur über CSS möglich zu machen.

Unter "slider-menu" finden sich die pagination Punkte.
Bedeutet das wenn ich diese Klasse anspreche kann ich mit
eigenen Styles die Punkte überschreiben?

Sind diese nicht fix in der *.js Datei hinterlegt?

Sorry für die blöde Fragerei, aber ich habs noch nicht ganz verstanden wo ich hier
ansetzen muss!

Vielen Dank
Grüße
Matthias

Ich denke du musst dir zuerst etwas CSS beibringen.

Zitat:

---

Zitat von Spooky

Ich denke du musst dir zuerst etwas CSS beibringen.

---

Evtl. so:

HTML-Code:

---

.slider-control .slider-menu b {
  cursor: pointer;
  text-indent: -9999em;
  width: 20px;
  height: 10px;
  display: inline-block;
  background: yellow;
  padding: 4px;
  margin: 0 2px; 0 0

}

.slider-control .slider-menu b.active {
  background: red;
}

---

Damit wirst Du wohl recht haben... ;)

Womit ich gerade nicht zurechtkomme:
Generell wird ja für jedes Content Element im Slider eine Zeile in der FE Ausgabe angelegt.
Zwischen den < > wird ein Punkt eingebaut, der wohl aus dem js stammt.

HTML-Code:

---

<b data-index="0" class="">•</b>

---

HTML-Code:

---

<b data-index="1" class="">•</b>

---

HTML-Code:

---

<b data-index="2" class="">•</b>

---

Wo wäre die richtige Stelle hierbei einzugreifen und das anzupassen?
Ich würde es zumindest gerne mal versuchen, vielleicht stellt sich ja ein AHA Effekt ein.

Vielen Dank
Grüße
Matthias

PS: Sorry hab den Beitrag mit einem möglichen Lösungsansatz zu spät gelesen.

Zitat:

---

Zitat von Messen

Zwischen den < > wird ein Punkt eingebaut, der wohl aus dem js stammt.

---

Yepp, den kannst du via CSS mit "text-indent: -9999em;" quasi ausblenden ...

Vielen Dank das ist die Lösung die gesucht hab.

HTML-Code:

---

text-indent:-9999em;

---

Grüße
Matthias