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=".min.css"/>
<script src="@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>

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./swiper/swiper-bundle.min.css"/>
<script src="https://unpkg./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>

• javascript
• html
• jquery
• css

Share Improve this question Follow edited Sep 2, 2021 at 13:03 biberman 5,77744 gold badges1515 silver badges3838 bronze badges asked Sep 2, 2021 at 12:43 h.m.p.frontendDeveloperh.m.p.frontendDeveloper 50511 gold badge66 silver badges1414 bronze badges 1

• 1 Did you try the autoHeight property? swiperjs./swiper-api#param-autoHeight – Thomas Tromp Commented Sep 2, 2021 at 13:54

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

Like Thomas mentioned in the ments 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./swiper/swiper-bundle.min.css"/>
<script src="https://unpkg./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>