Swiper: Dynamische Höhe des Sliders

21.07.2014, 13:41 von Daniel || 1 Kommentare || Mit anderen teilen

Swiper ist für mich zum Standard geworden, wenn es um die Umsetzung beliebiger Touch-optimierter Sachen geht. Dank seiner umfangreichen API bietet es darüber hinaus die Möglichkeit (fast) unbegrenzter Anpassungen.

Trotz des mittlerweile eher schlechten Rufs sind SIider - wie das Framework Swiper - sehr nützliche Werkzeuge für allerlei mögliche Aufgabenstellungen. Wer beim Thema Slider nur an Startseiten-Präsentationen denkt, denkt etwas zu kurz. So lassen sich damit beispielsweise auch Touchfähige und individuelle Galerien bauen.

Ein Slider mit dynamischer Höhe

Normalerweise übernimmt Swiper alle möglichen Berechnungen, um eine optimale Darstellung zu erzielen. Bei einem Slider mit unterschiedlichen Slide-Höhen ist das leider etwas schwieriger. Möchte man die Gesamthöhe des Blocks mit jedem angezeigten Slide anpassen, so muss man die Berechnung dafür selbst übernehmen.

Sinn macht das logischerweise nur, wenn es immer nur ein aktives Element gibt, welches angezeigt wird. Nichtsdestotrotz fällt die Berechnung sehr einfach aus. Am Rande sei noch erwähnt, dass keine per AJAX nachgeladenen Slides im Spiel sind, was die Sache verkomplizieren würde.

Vor dem Initialisieren des Sliders werden die Berechnungen der Höhe durchgeführt und in einem Array gespeichert:

var $slideSelector = '.slide',
    $slideHeights = [];

$($slideSelector).each(function (index, element) {
  $slideHeights[index] = $(element).height();
});

Um während des Initialisierens die Werte übergeben zu können:

var $sliderWrapperClass = 'wrapper',
    $slideClass = 'slide',
    $mySlider = $('.mySlider').swiper({
      // options
      wrapperClass: $sliderWrapperClass,
      slideClass: $slideClass,
      onFirstInit: function(swiper) {
        $('.' + $sliderWrapperClass + ', .' + $slideClass).css('height', $slideHeights[0]);
      },
      onSlideChangeStart: function(swiper) {
        $('.' + $sliderWrapperClass + ', .' + $slideClass).css('height', $slideHeights[swiper.activeIndex]);
      }
    });

Zum Schluss seien noch zwei Sachen anzumerken. Zum einen können alle Berechnungen auch in nativem JS - und nicht wie hier jQuery - durchgeführt werden, da Swiper keine Bibliothek zum Funktionieren braucht. Die zweite Anmerkung bezieht sich auf swiper.activeIndex in der vorletzten Zeile, die mit swiper.activeLoopIndex ausgetauscht werden muss, wenn man den Loop-Modus einsetzt.

Schlüsselwörter zu diesem Beitrag

« zurück

Hier schreibe ich,

Ich

Daniel Erlinger, als selbstständiger Webdesigner über die Themen Webdesign, Contao, Shopsysteme, Kreatives, Neues und alles, was sonst noch dazu passt.

Vernetzt

Twitter
Mister Wong
Contao Community

Kommentare

23.07.2014 von Michael

Genau das was ich gesucht habe! Danke,.. :)



Nutze Deinen Gravatar.


Bitte rechnen Sie 7 plus 5.