How to solve the problem of infinite height in swiper (direction: "vertical")

Question

I want to create a vertical slider swiper on my web page. I want each slide to be the height of its own textual content. If I do not set a certain height (for example 500 pixels), with the height provided by the swiper (100%), an infinite height will be created. I just want each slide to be as tall as the text when the user clicks on each of the swiper-paginations. And I do not want to be able to move slides with the mouse or touch. Version used: 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

Like Thomas mentioned in the comments you could use autoHeight: true. But this will only fix the infinite height issue. It will not set the slide height to the content height of that slide.

Working example: (with fix height to fit in the 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>