swiper.js - 在 Swiper 的垂直模式下设置正确的高度

Question

这几天我一直致力于在我的应用程序中设置刷卡器，但我仍然没有运气，从这里到 Github 问题或网络上的其他地方都没有找到任何工作示例。

我无法通过针对此问题的任何建议解决方案在垂直模式下设置滑动器的动态高度。

我有几张图片作为幻灯片，高度为数千像素，但如果我将其切换为文本，则很好，因为文本的高度约为 10 像素。任何超过一定高度的div都会导致异常高度。

我发现建议的 CSS 不起作用，因为它只限制了窗口的高度，而且图片被截断时非常不愉快。

js 解决方案是正确的方法，但我找不到有效的解决方案，而我尝试过的所有解决方案都导致了一半的工作解决方案。

似乎正确的方法是使用 onSlideChangeStart 来更正下一张幻灯片的高度，如下所示，但这不起作用，因为在其自己的设置中无法识别垂直滑动器。

onSlideChangeStart: (swiper)->
$(swiper.slides).each ->
    $(this).css height: if $(this).index() != swiper.activeIndex then 0 else 'auto'

我尝试使用 active 类而不是 API，因为即使在它自己的 onSlideChangeStart 中调用 swiperV.activeIndex 时它也不起作用，如下所示，但未定义 swiper-slide-active。

这是我对 3 个嵌套 slider 的设置。

    var swiperVV = new Swiper('.swiper-container-vv', {
        direction: 'vertical',
        updateOnWindowResize: true,
        grabCursor: true,
        loop: true,
        mousewheel: true,
        lazy: true,
        zoom: true,
        effect: 'slide',
        spaceBetween: 0,
        pagination: {
            el: '.swiper-pagination-v',
            clickable: true,
        }, 
    });
    var swiperH = new Swiper('.swiper-container-h', {
        initialSlide:0,
        spaceBetween: 0,
        autoHeight: true,
        updateOnWindowResize: true,
        grabCursor: true,
        loop: true,
        parallax: true,
        lazy: true,
        effect: 'slide',
        pagination: {
            el: '.swiper-pagination-h',
            clickable: true,
        },
        scrollbar: {
            el: '.swiper-scrollbar',
            hide: true,
        },
    });
    var swiperV = new Swiper('.swiper-container-v', {
        direction: 'vertical',
        autoplay: {
            delay: 5000,
        },
        autoHeight: true,
        updateOnWindowResize: true,
        grabCursor: true,
        loop: true,
        mousewheel: true,
        lazy: true,
        zoom: true,
        effect: 'slide',
        spaceBetween: 0,
        pagination: {
            el: '.swiper-pagination-v',
            clickable: true,
        },
        slideChange: resizeSwiper()
    });

    function resizeSwiper() {
        console.log($('.swiper-container-v .swiper-slide swiper-slide-active').height());
        $('.swiper-container-v, .swiper-container-v .swiper-slide').css({ height: $('.swiper-container-v .swiper-slide .swiper-slide-active').height() });

    }

我已经浏览了建议用户的所有示例，例如下面在 github、stackoverflow 和 codepen 中列出的示例。 https://github.com/nolimits4web/swiper/issues/48 https://github.com/nolimits4web/Swiper/issues/153

Answer 1

这是对我有用的解决方法

 if (typeof Swiper != "undefined"){
  var popularSwiper = new Swiper(".popularSwiper", {
    direction: "vertical",
    autoHeight: true,
    autoplay: {
      delay: 5000,
    },
    pagination: {
      el: ".swiper-pagination",
      clickable: true,
    },
    on:{
      init:function(){
        setSlideHeight(this);
      },
      slideChangeTransitionEnd:function(){
        setSlideHeight(this);
      }
    }
  });

  function setSlideHeight(that){
    $('.swiper-slide').css({height:'auto'});
        var currentSlide = that.activeIndex;
        var newHeight = $(that.slides[currentSlide]).height();

        $('.swiper-wrapper,.swiper-slide').css({ height : newHeight })
        that.update();
   }
 }