Ergebnis 1 bis 21 von 21

Thema: Slider für Contao 5.3

  1. #1
    Contao-Nutzer
    Registriert seit
    24.06.2009.
    Beiträge
    150

    Standard Slider für Contao 5.3

    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

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

    Standard

    Zitat Zitat von mattes Beitrag anzeigen
    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).
    » sponsor me via GitHub or PayPal or Revolut

  3. #3
    Contao-Nutzer
    Registriert seit
    24.06.2009.
    Beiträge
    150

    Standard

    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?

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

    Standard

    Was genau willst du dort machen oder finden ... ?
    » sponsor me via GitHub or PayPal or Revolut

  5. #5
    Contao-Nutzer
    Registriert seit
    24.06.2009.
    Beiträge
    150

    Standard

    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?

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

    Standard

    Zitat Zitat von mattes Beitrag anzeigen
    Ich habe nur nach Einstellmöglichkeiten gesucht
    Die Dokumentation findest du unter https://swiperjs.com/swiper-api


    Zitat Zitat von mattes Beitrag anzeigen
    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.
    » sponsor me via GitHub or PayPal or Revolut

  7. #7
    Contao-Nutzer
    Registriert seit
    24.06.2009.
    Beiträge
    150

    Standard

    Perfekt! Danke dir

  8. #8
    Contao-Nutzer Avatar von Niels H
    Registriert seit
    14.08.2012.
    Ort
    Köln
    Beiträge
    80
    Partner-ID
    11984

    Standard

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

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

  9. #9
    Community-Moderatorin & Contao-Urgestein Avatar von mlweb
    Registriert seit
    10.07.2011.
    Beiträge
    7.080
    Contao-Projekt unterstützen

    Support Contao

    Standard

    @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?
    Ich habe Dir mit meinen Hinweisen geholfen und Du möchtest Dich bedanken?
    Unterstütze bitte das Contao-Projekt (Button Links)
    Weitere Spendenmöglichkeiten
    ------------------------------------------------------------------------------------------------------
    Contao-Dokumentation: Contao-Handbuch und Contao-Entwickler-Doku
    Contao-Online-Video-Kurse: Contao Academy
    Funktionalität erweitern: Contao-Erweiterungen

    Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.




  10. #10
    Contao-Nutzer
    Registriert seit
    24.06.2009.
    Beiträge
    150

    Standard

    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?

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

    Standard

    Ohne Inhalt deiner Templates wird man da nichts sagen können
    » sponsor me via GitHub or PayPal or Revolut

  12. #12
    Contao-Nutzer
    Registriert seit
    24.06.2009.
    Beiträge
    150

    Standard

    Hi Spooky,

    ah sorry:

    PHP-Code:
    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',
      },
      
    slidesPerView3,
      
    grid: {
        
    rows1,
      },
      
    spaceBetween30,



    {% 
    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: {
        
    crossFadetrue
      
    },

    {% 
    endblock %} 
    Geändert von mattes (15.04.2024 um 13:23 Uhr)

  13. #13
    Community-Moderatorin & Contao-Urgestein Avatar von mlweb
    Registriert seit
    10.07.2011.
    Beiträge
    7.080
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Bitte zur besseren Lesbarkeit Code-Blocks verwenden.
    Ich habe Dir mit meinen Hinweisen geholfen und Du möchtest Dich bedanken?
    Unterstütze bitte das Contao-Projekt (Button Links)
    Weitere Spendenmöglichkeiten
    ------------------------------------------------------------------------------------------------------
    Contao-Dokumentation: Contao-Handbuch und Contao-Entwickler-Doku
    Contao-Online-Video-Kurse: Contao Academy
    Funktionalität erweitern: Contao-Erweiterungen

    Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.




  14. #14
    Contao-Nutzer
    Registriert seit
    24.06.2009.
    Beiträge
    150

    Standard

    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

    HTML-Code:
    <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

    HTML-Code:
    <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?

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

    Standard

    Poste einen Link zur Seite.
    » sponsor me via GitHub or PayPal or Revolut

  16. #16
    Contao-Nutzer
    Registriert seit
    24.06.2009.
    Beiträge
    150
    Geändert von mattes (16.04.2024 um 10:02 Uhr)

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

    Standard

    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.
    » sponsor me via GitHub or PayPal or Revolut

  18. #18
    Contao-Nutzer
    Registriert seit
    24.06.2009.
    Beiträge
    150

    Standard

    Hallo Spooky,

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

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

    Standard

    Du könntest das als Feature Request auf GitHub posten.
    » sponsor me via GitHub or PayPal or Revolut

  20. #20
    Contao-Nutzer
    Registriert seit
    24.06.2009.
    Beiträge
    150

    Standard

    Gute Idee werde ich machen!

    Danke dir

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

    Standard

    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.
    » sponsor me via GitHub or PayPal or Revolut

Aktive Benutzer

Aktive Benutzer

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

Berechtigungen

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