Minitutorial: Standard Contao Slider mit CSS3 und Transitions aufbohren

Hi,
ihr kennt den normalen Slider von Contao.
Aufregend ist etwas anderes aber er tut seinen Dienst und der Code ist schlank. Siehe unten - Videos auf Imgur
Mit ein paar Zeilen CSS3 kann man den Slider anständig aufbohren zumindest was die Übergänge angeht.
Der Slider bietet leider nicht die Möglichkeit die Übergänge zu beeinflussen indem z.B. aktiv Klassen gesetzt werden oder man Übergänge definieren kann.
Mit dem Code kann man auf die aktiven und inaktiven Slides matchen:

Code:

---

  /* 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)"]) {
    /* das sollte klar sein */
    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 gleich (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 ist der Übergang aufgehübscht. Man kann durch die Attributeselektoren und ein + Selektor auch noch auf das nächste (rechts folgende Element) matchen.

Ein weiterer cooler Effekt entsteht wenn man das Transform vom Slider komplett überschreibt z.B. so:

Code:

---

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

---

Nicht vergessen ... das ist mehr oder weniger ein unsauberer Hack. Die Schwachstelle ist die Repräsentation der Transformanweisung im Style Attribute.
Aber viel Spaß ... etwas CSS spart hier nämlich viel Javascript, ggf Templateanpassungen oder auch eine Contaoerweiterung.

Nachtrag
Ich habe bei Imgur mal ein paar Bewegtbilder hochgeladen damit man sich das besser vorstellen kann
https://imgur.com/a/cKeUP1r

@Admins ... webp wäre schon etwas cool aber ich weiß, dass Vbulletin halt Vbulletin ist ;)