Блог

Главная - Вопросы по программированию - Как решить проблему бесконечной высоты в свайпере (направление: «вертикаль»)

Как решить проблему бесконечной высоты в свайпере (направление: «вертикаль»)

#javascript #html #jquery #css

Вопрос:

Я хочу создать вертикальный ползунок для прокрутки на своей веб-странице. Я хочу, чтобы каждый слайд имел высоту собственного текстового содержимого. Если я не задам определенную высоту (например, 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>

Комментарии:

1. Вы пробовали свойство autoHeight? swiperjs.com/swiper-api#param-autoHeight

Ответ №1:

Как Томас упоминал в комментариях, которые вы могли бы использовать autoHeight: true . Но это только исправит проблему бесконечной высоты. Он не установит высоту слайда на высоту содержимого этого слайда.

Рабочий пример: (с фиксированной высотой, чтобы поместиться в стопку)

 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>

Комментарии:

1. привет, мой друг. большое спасибо. autoHeight: true => решите проблему с бесконечной высотой, но когда текстовое содержимое одного из слайдов длинное, высота будет меньше, чем текстовое содержимое. Лучше не иметь определенной высоты И определять высоту в соответствии с содержанием текста.

2. Это для демонстрации, чтобы соответствовать фрагменту стека…

3. большое спасибо, мой друг, но если мы установим только autoHeight: true, и если мы не установим определенное количество высоты (по умолчанию все остается swiper), снова высота каждого .swiper-слайда недопустимо высока.

Метки: