Swiper: Dynamische Höhe des Sliders

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.

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.