Grafik zum Trennen der Inhaltselemente

Contao 3 - Out of the box Content Slider responsive

zuerst bindet man ein klassisches Script ein, das die Bildschirmbreite (Höhe) des Browsers überwacht. Ich habe hier ein Script verwendet, dass ich schon vor Jahren verwendet habe, um Meldungen zentriert im Browser auszugeben. Man findet aber auch alle anderen möglichen Varianten im Netz.

function Fensterweite() {
      if (window.innerWidth) {  
             return window.innerWidth;  }
    else if (document.body && document.body.offsetWidth)
        {   
        return document.body.offsetWidth; 

}
        else {   
        return 0; 
}}

function neuAufbau() { 
     if (Weite != Fensterweite())  
        contaoSlider();
}

/* Überwachung von Internet Explorer initialisieren */
if (!window.Weite && document.body && document.body.offsetWidth) { 
      window.onresize = neuAufbau; 
      Weite = Fensterweite();
}

/* Überwachung von Netscape initialisieren */if (
!window.Weite && window.innerWidth) {
     window.onresize = neuAufbau; 
     Weite = Fensterweite();
}   

im Anschluss muss man nur noch dem die Breite des Sliders anpassen:
////////////////////////////////////////////// Sliderfunction
contaoSlider() {    
     var FensterBreite = Fensterweite(); 
     var SliderBreite = FensterBreite - 30 +"px"; 
          if ($('.slider-wrapper').length > 0){
              $('.ce_sliderStart').css('width', SliderBreite); 
}}  

 

Zurück

Einen Kommentar schreiben

Kommentar von mark |

FUnktioniert bei mir mit contao 3 nicht hast du das selbst bei dir auch mal ausprobiert?

Antwort von Philipp Kayser

Hi Mark,

das liegt daran, dass das Inhaltselement Conten-Slider in Contao 3 bereits responsive ist, bzw. mit ein wenig css so angepasst werden kann, dass der von mir geschriebene Artikel aus dem Jahr 2014 überflüssig ist. Du solltest halt darauf achten, dass im Seitenlayout das jQuery Template -> slider ein Häkchen hat. 

Schöne Grüße

Phil

Bitte rechnen Sie 2 plus 6.
Grafik zum Trennen der Inhaltselemente