Question

我正在尝试使用Swiper制作垂直滑块。

它看起来像本网站上的图片一样

https://www.ikbird.com/

但是对浏览器大小更改的响应要好一些。

它仅包含示例的图像。我希望每个图像都具有相同的高度。因此，假设它占据了屏幕高度的80％。

我可以实现，但不能同时按宽度缩放

我已经尝试在CSS中使用vh和vw单位。问题是，我可以使它适用于宽度，但不适用于高度，反之亦然。

我曾尝试使用vh和vw，但似乎都无法正常工作。

这是我尝试过的CSS版本：

        .swiper-container {
            width: auto;
            height: 100%;
            max-height: 100%;
            text-align: center;
            background: blue;
        }
        .swiper-container-container {
            margin-top: 5vh;
            height: 90vh;
            background: green;
        }

        img {
            max-width: 100%;
            max-height: 100%;
            height: 100%;

        }

使用HTML（由于某些原因，如果vh单元没有外部容器，则它们会中断）

        <div class="swiper-container">
            <div class="swiper-wrapper">

                <div class="swiper-slide"><img src="images/placeholder-a.png"></div>
                <div class="swiper-slide"><img src="images/placeholder-b.png"></div>
                <div class="swiper-slide"><img src="images/placeholder-c.png"></div>

            </div>
        </div>
    </div>

    <script src="https://unpkg.com/swiper/js/swiper.min.js"></script>
    <script>
          var mySwiper = new Swiper ('.swiper-container', {

            direction: 'vertical',
            centeredSlides: true,
            /*cssMode: true,*/
            mousewheel: true,
            keyboard: true,
            /*freeMode: true,*/
            spaceBetween: 30,

          })
    </script>

有人知道如何实现吗？如果将其放在其他滑块中或采用其他技术，那就没问题了。

谢谢

我可以让Swiper响应地显示相同高度的图像吗

0 个答案: