在 Swiper 的垂直模式下设置正确的高度答案

【问题标题】：Setting the correct height in vertical mode in Swiper在 Swiper 的垂直模式下设置正确的高度
【发布时间】：2020-11-27 04:15:12
【问题描述】：

这几天我一直在努力在我的应用程序中设置 swiper，但我仍然没有运气，并且从这里到 Github 问题或网络上的其他地方都找不到工作示例。

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

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

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

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

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

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

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

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

    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

【问题讨论】：

标签： swiper

【解决方案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();
   }
 }

【讨论】：