Contao-Camp 2024
Ergebnis 1 bis 9 von 9

Thema: Slider (swiper) Pagination anpassen?

  1. #1
    Contao-Nutzer
    Registriert seit
    13.07.2010.
    Beiträge
    45

    Standard 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

  2. #2
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    33.896
    Partner-ID
    10107

    Standard

    Zitat Zitat von Messen Beitrag anzeigen
    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

  3. #3
    Contao-Urgestein Avatar von Kahmoon
    Registriert seit
    22.06.2009.
    Ort
    München
    Beiträge
    5.273

    Standard

    Zitat Zitat von Messen Beitrag anzeigen

    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.

  4. #4
    Contao-Nutzer
    Registriert seit
    13.07.2010.
    Beiträge
    45

    Standard

    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
    Angehängte Grafiken Angehängte Grafiken

  5. #5
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    33.896
    Partner-ID
    10107

    Standard

    Ich denke du musst dir zuerst etwas CSS beibringen.

  6. #6
    Contao-Urgestein Avatar von Franko
    Registriert seit
    22.06.2009.
    Beiträge
    1.503
    Partner-ID
    6122

    Standard

    Zitat Zitat von Spooky Beitrag anzeigen
    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;
    }
    Freelancer, Digital Design Enthusiast, Contao Aficionado and Tutorial Junkie @MoinFranko - Carpe diem ...

  7. #7
    Contao-Nutzer
    Registriert seit
    13.07.2010.
    Beiträge
    45

    Standard

    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.

  8. #8
    Contao-Urgestein Avatar von Franko
    Registriert seit
    22.06.2009.
    Beiträge
    1.503
    Partner-ID
    6122

    Standard

    Zitat Zitat von Messen Beitrag anzeigen
    Zwischen den < > wird ein Punkt eingebaut, der wohl aus dem js stammt.
    Yepp, den kannst du via CSS mit "text-indent: -9999em;" quasi ausblenden ...
    Freelancer, Digital Design Enthusiast, Contao Aficionado and Tutorial Junkie @MoinFranko - Carpe diem ...

  9. #9
    Contao-Nutzer
    Registriert seit
    13.07.2010.
    Beiträge
    45

    Standard

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

    HTML-Code:
    text-indent:-9999em;
    Grüße
    Matthias

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •