Slider für Contao 5.3

[mattes]

Moin Zusammen,

ich bin auf der Suche nach einem Content-Slider für Contao 5.3 der auch Inhalte (in erster Linie nur Bilder) faden kann. Momentan benutze ich den im Core enthaltenen Swipe-Slider, leider habe ich aber nirgendwo eine Möglichkeit gefunden dort die Inhalte zu faden, bzw. das einzustellen.

Über eure Hilfe bin ich wie immer dankbar!

Gruß mattes

[Spooky]

Momentan benutze ich den im Core enthaltenen Swipe-Slider, leider habe ich aber nirgendwo eine Möglichkeit gefunden dort die Inhalte zu faden, bzw. das einzustellen.

Contao 5.3 nutzt Swiper.js - dort kannst du fade einstellen. Dafür musst du das Template anpassen (das Inhaltselement selbst hat dafür noch keine direkte Einstellungsmöglichkeit).

[mattes]

Hi Spooky,

er lesen kann ist klar im Vorteil, ich tingelte im Verzeichnis assets/swipe herum. Ist das noch alter Müll oder wofür dient der noch?

[Spooky]

Was genau willst du dort machen oder finden ... ?

[mattes]

Ich habe nur nach Einstellmöglichkeiten gesucht und da bin ich durch das Verzeichnis gegangen auf der Suche danach. Wenn ich nun bei dem Swiper die Einstellung auf fade ändern möchte mach ich das in dem swiper.html.twig Template?

[Spooky]

Ich habe nur nach Einstellmöglichkeiten gesucht

Die Dokumentation findest du unter https://swiperjs.com/swiper-api

Wenn ich nun bei dem Swiper die Einstellung auf fade ändern möchte mach ich das in dem swiper.html.twig Template?

Genau, jap. Also du legst dir am besten ein content_element/swiper/fade.html.twig an, extendest dort das swiper Template und überschreibst den init_options Block.

Voraussetzung dafür ist natürlich, dass du das neue Swiper Inhaltselement nutzt, nicht das alte Slider Inhaltselement.

[mattes]

Perfekt! Danke dir

[Niels H]

Mit dieser Erweiterung wird ein Swiper-Template mit fade-Animation mitgeliefert:

https://extensions.contao.org/?q=fad...-contao-bundle

[mlweb]

@Niels H
Nachdem in Contao 5 der Swiper Slider Standard ist wäre es doch vielleicht interessant, die notwendigen Einstellung oder die notwendigen Templateanpassungen auch in den Core zu bringen oder habe ich Dich falsch verstanden und die Erweiterung bringt auch einen anderen Slider mit?

[mattes]

Hallo Zusammen,

ich muss leider dieses Thema Swiper Slider und Twig Templates nochmals anstoßen. Folgendes, ich benutze den Slider für zwei unterschiedliche Dinge (Bild-Slider und News-Slider) an unterschiedlichen Stellen. Hierfür habe ich zwei Templates erstellt, die liegen in einem Extra Verzeichnis innerhalb von /templates

templates/swiper/

aktuells.html.twig und fade.html.twig


Diese unterschiedlichen Templates sind auch zu dem jeweiligen Slider ausgewählt. Nun besteht das Problem, dass Änderung egal in welchen Template immer Global greifen, Änderungen werden immer in beiden Slidern dargestellt. Hat einer ne Idee wie diese Vererbung nicht greift?

[Spooky]

Ohne Inhalt deiner Templates wird man da nichts sagen können

[mattes]

Hi Spooky,

ah sorry:

templates/content_element/swiper/aktuelles.html.twig

{% extends "@Contao/content_element/swiper.html.twig" %}


{% block init_options %}
  pagination: {
    el: '.swiper-pagination',
    type: 'bullets',
  },
  navigation: {
    prevEl: '.swiper-button-prev',
    nextEl: '.swiper-button-next',
  },
  slidesPerView: 3,
  grid: {
    rows: 1,
  },
  spaceBetween: 30,



{% endblock %}



templates/content_element/swiper/fade.html.twig

{% extends "@Contao/content_element/swiper.html.twig" %}


{% block init_options %}
  pagination: {
    el: '.swiper-pagination',
    type: 'bullets',
  },
  navigation: {
    prevEl: '.swiper-button-prev',
    nextEl: '.swiper-button-next',
  },
  effect: 'fade',
  fadeEffect: {
    crossFade: true
  },

{% endblock %} 

[mlweb]

Bitte zur besseren Lesbarkeit Code-Blocks verwenden.

[mattes]

Hallo Zusammen,

so wie es aussieht hat das irgendwie mit Vererbung zu tun, obwohl zwei Templates angelegt sind werden die Anpassungen trotzdem übernommen. Sobald ich einen Slider (Beide auf einer Seite) deaktiviere funktioniert es einwandfrei.

Bild-Slider

<div class="swiper swiper-initialized swiper-horizontal swiper-backface-hidden" data-delay="5000" data-speed="1000" data-offset="0">
	<div class="swiper-wrapper" id="swiper-wrapper-3f03311ed106de522" aria-live="off">
	...
	</div>
</div>

News-Slider

<div class="swiper swiper-initialized swiper-horizontal swiper-backface-hidden" data-delay="0" data-speed="300" data-offset="0">
	<div class="swiper-wrapper" id="swiper-wrapper-910ed84a09a31cbc0" aria-live="polite">
	...
	</div>
</div>

Hat das vielleicht mit dem initialisieren des jeweiligen Sliders zu tun?

[Spooky]

Poste einen Link zur Seite.

[mattes]

Moin Spooky,

anbei der Link:



http://update.schmallenberg-unternehmen-zukunft.de/

[Spooky]

Das Problem ist, dass Contao im swiper.html.twig Template von Haus aus immer nur ein Initialisierungsjavascript ausgibt. Somit funktioniert der Anwendungsfall mit zwei verschiedenen Swipern mit unterschiedlichen Einstellungen von Haus aus leider nicht.

[mattes]

Hallo Spooky,

Danke für deine Antwort. Schade das es so nicht funktioniert da ich diesen Slider mit seinen ganzen Einstellungsmöglichkeiten sensationell finde!

[Spooky]

Du könntest das als Feature Request auf GitHub posten.

[mattes]

Gute Idee werde ich machen!

Danke dir

[Spooky]

Wobei, ein Feature Request bei Contao würde auch nichts bringen.

Grundsätzlich müsstest du folgendes implementieren:

1. In deinen angepassten Swiper Templates die Swiper Options als JSON direkt in die attributes speichern, also bspw. als data-swiper-options.
2. Im Haupttemplate den gesamten script Block überschreiben und das JavaScript dahingehend anpassen, dass die Options aus dem data Attribut ausgelesen werden.