Der Contao Slider aufgebohrt mit CSS

Der Standard Contao Slider ist klein (kleines JS und CSS) und schnell. Das kommt mit Kosten: er ist unflexibel. Man kennt es von den anderen Slidern, dass diese mindestens die Art des Bildübergangs anpassen können. Das geht mit dem Contao Slider nicht. Zudem kommt dazu, dass das aktive Bild keine "active" CSS-Klasse bekommt. Das sieht dann ungefähr so aus:

Bevor man jedoch anfängt, den Javascriptcode von SWIPE anzupassen, kann man auch ein wenig CSS Magie walten lassen. Dazu ist nicht viel nötig. Der JS Code setzt bei jedem Fenster ein Style Attribute. Auf das matchen wir.

  /* wähle alle Elemente, die im Style Attribute NICHT translateX(0px) stehen haben - also alle die nicht zu sehen sind */
  /* der erste selector ist jeweils für den Chrome (das Leerzeichen vor 0px ist wichtig), der zweite für den Firefox (Edge, Brave, Apple Browser ungetestet) */
  .slider-wrapper > :not([style*="translate(0px, 0px)"]),
  .slider-wrapper > *:not([style*="translateX(0px)"]) {
  
    opacity: 0;
    /* hier setzen wir eine nice transition für das transform und für die opacity
       und überschreiben die von Javascript gesetzten Werte mit !important (ist nicht die feine Englische aber geht nicht anders)
       Opacity dauert etwas länger damit das Bild nicht komplett weg ist wenn es raus fährt.
    */
    transition: transform 1.6s cubic-bezier(.46,.03,.52,.96),
                opacity 1.8s ease-in-out !important;

  }
  .slider-wrapper > [style*="translate(0px, 0px)"],
  .slider-wrapper > *[style*="translateX(0px)"] {
    opacity: 1;
    /* hier das Gleiche (die Zeit für das Transform sollte gleich der obigen sein sonst sieht das oft nicht schön aus 
        opacity dauert etwas länger und sieht damit smoother aus.
    */

    transition: transform 1.6s cubic-bezier(.46,.03,.52,.96),
                opacity 4s ease-in-out !important;
  }
  

Schon werden die Übergänge ganz smooth und nicht so kantig. Jetzt kommen noch ein paar weitere Zeilen Code hinzu und der Slider blendet nun die Bilder über

  .slider-wrapper > :not([style*="translate(0px, 0px)"]),
  .slider-wrapper > :not([style*="translateX(0px)"]) {
    --transform-time: 1.6s;
    opacity: 0;
    transform: translateX(-10px) !important;
    transition: transform 1.6s cubic-bezier(.46,.03,.52,.96),
                opacity 1.8s ease-in-out !important;
  }
  

Das sieht dann so aus

So sieht der fertige Code aus.

  .slider-wrapper > :not([style*="translate(0px, 0px)"]),
  .slider-wrapper > :not([style*="translateX(0px)"]) {
    --transform-time: 1.6s;
    opacity: 0;
    transform: translateX(-10px) !important;
    transition: transform 1.6s cubic-bezier(.46,.03,.52,.96),
                opacity 1.8s ease-in-out !important;
  }
  
  .slider-wrapper > [style*="translate(0px, 0px)"],
  .slider-wrapper > *[style*="translateX(0px)"] {
    opacity: 1;
    transition: transform 1.6s cubic-bezier(.46,.03,.52,.96),
                opacity 4s ease-in-out !important;
  }
  

Schon hat man sich angepasste Templates erspart. Auch hat man sich den ganzen Aufwand des Einbindes eines anderen JS Sliders gespart. Die Bedienung bleibt einfach (was ein Vorteil der Unflexibilität ist).

Ich hoffe es hilft jemandem :-D