如何解决swiper无限高度问题（方向：“垂直”）

Question

我想在我的网页上创建一个垂直滑块。我希望每张幻灯片的高度都是其自己的文本内容的高度。如果我没有设置一定的高度（例如 500 像素），则使用滑动器提供的高度（100%），将创建无限的高度。我只是希望当用户单击每个滑动分页时，每张幻灯片都与文本一样高。我不希望能够用鼠标或触摸来移动幻灯片。使用的版本：Swiper 7.0.1。

var swiper = new Swiper(".mySwiper", {
    direction: "vertical",
    speed: 600,
    allowTouchMove: false,
    pagination: {
        el: ".swiper-pagination",
        clickable: true,
    },
});

.swiper {
    width: 100%;
    height: 100%;
}

.swiper {
    width: 100%;
    /*height: 100%;*/
    /* height: 500px; */
    /* min-height: 500px; */
    max-height: 500px;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;

    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

<link rel="stylesheet"href="https://unpkg.com/swiper/swiper-bundle.min.css"/>
<script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>
 
<div class="hmp--slide">
     <div class="swiper mySwiper">
          <div class="swiper-wrapper">
               <div class="swiper-slide">
                    <div class="slide--body">
                         <p>
                            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptates sapiente ipsa, ducimus, doloremque ipsam molestiae quasi beatae autem debitis fugiat corrupti ad incidunt suscipit odio cupiditate modi porro sequi. Voluptate.
                         </p>                                    
                         <h4>hmp</h4>
                    </div>
               </div>
                
               <div class="swiper-slide">
                    <div class="slide--body">
                         <p>
                            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptates sapiente ipsa, ducimus, doloremque ipsam molestiae quasi beatae autem debitis fugiat corrupti ad incidunt suscipit odio cupiditate modi porro sequi. Voluptate.
                          </p>                                    
                          <h4>hmp</h4>
                     </div>
               </div>
                
               <div class="swiper-slide">
                    <div class="slide--body">
                         <p>
                            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptates sapiente ipsa, ducimus, doloremque ipsam molestiae quasi beatae autem debitis fugiat corrupti ad incidunt suscipit odio cupiditate modi porro sequi. Voluptate.
                         </p>                                    
                         <h4>hmp</h4>
                    </div>
               </div>
                
               <div class="swiper-slide">
                    <div class="slide--body">
                         <p>
                            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptates sapiente ipsa, ducimus, doloremque ipsam molestiae quasi beatae autem debitis fugiat corrupti ad incidunt suscipit odio cupiditate modi porro sequi. Voluptate.
                         </p>                                    
                         <h4>hmp</h4>
                    </div>
               </div>
          </div>
          
          <div class="swiper-pagination"></div>
     </div>
</div>

Answer 1

就像托马斯在评论中提到的那样，你可以使用autoHeight: true. 但这只能解决无限高度问题。它不会将幻灯片高度设置为该幻灯片的内容高度。

工作示例：（具有固定高度以适合 stacksnippet）

var swiper = new Swiper(".mySwiper", {
    direction: "vertical",
    speed: 600,
    allowTouchMove: false,
    autoHeight: true,
    pagination: {
        el: ".swiper-pagination",
        clickable: true,
    },
});

.swiper-slide {
    display: flex;
    align-items: center;
    max-height: 250px;
    text-align: center;
    font-size: 18px;
}

<link rel="stylesheet"href="https://unpkg.com/swiper/swiper-bundle.min.css"/>
<script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>
 
<div class="hmp--slide">
     <div class="swiper mySwiper">
          <div class="swiper-wrapper">
               <div class="swiper-slide">
                    <div class="slide--body">
                         <p>
                            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptates sapiente ipsa, ducimus, doloremque ipsam molestiae quasi beatae autem debitis fugiat corrupti ad incidunt suscipit odio cupiditate modi porro sequi. Voluptate.
                         </p>                                    
                         <h4>hmp</h4>
                    </div>
               </div>
                
               <div class="swiper-slide">
                    <div class="slide--body">
                         <p>
                            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptates sapiente ipsa, ducimus, doloremque ipsam molestiae quasi beatae autem debitis fugiat corrupti ad incidunt suscipit odio cupiditate modi porro sequi. Voluptate.
                          </p>                                    
                          <h4>hmp</h4>
                     </div>
               </div>
                
               <div class="swiper-slide">
                    <div class="slide--body">
                         <p>
                            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptates sapiente ipsa, ducimus, doloremque ipsam molestiae quasi beatae autem debitis fugiat corrupti ad incidunt suscipit odio cupiditate modi porro sequi. Voluptate.
                         </p>                                    
                         <h4>hmp</h4>
                    </div>
               </div>
                
               <div class="swiper-slide">
                    <div class="slide--body">
                         <p>
                            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptates sapiente ipsa, ducimus, doloremque ipsam molestiae quasi beatae autem debitis fugiat corrupti ad incidunt suscipit odio cupiditate modi porro sequi. Voluptate.
                         </p>                                    
                         <h4>hmp</h4>
                    </div>
               </div>
          </div>
          
          <div class="swiper-pagination"></div>
     </div>
</div>