Ion-slide-box с различными высотами слайдов

Question

Я использую ion-slide-box, но проблема в том, что мои ion-slide s не находятся на одной высоте, поэтому он устанавливает все ion-slide s в размере высоты одного. Ниже приведен пример

• ионно-слайд 1 высота 30px
• ионно-слайд 2 высота 100px

Так, ion-slide-box высота будет 100px, которые делают пустое пространство (70px) в slide1 , И когда пользователь слайд, используя это пустое пространство (70 пикселей), slider не работает.

Что может быть способом/временным решением для работы slidebox для разных высот слайдов?

Answer 1

Если вы хотите ползунок фиксированной высоты с каждым горок заполняя высоту ползунка, не оставляя пустое пространство, В style.css добавить эти строки:

.slider { 
height: 200px; /* slider height you want */ 
} 
.slider-slide { 
color: #000; 
background-color: #fff; 
height: 100%; 
} 

Answer 2

$ionicScrollDelegate.resize(); did the trick 

чек this для codepen

Answer 3

Вы можете использовать это:

.slider-slides{ 
    display: flex; 
    flex-direction: row; 
} 

Answer 4

Вы можете использовать Flex-поле, чтобы организовать высоту горки:

.slider-slides { 
    display: flex; 
} 

Не забудьте сбросить высоту слайдов и все слайды будут получить наибольшую высоту :)

.slider-slide { 
    height: auto; 
} 

Answer 5

сильный текст если вы используя ионный 2 , чем добавить scss.

.slide-zoom { 
    height: 100%; 
    } 

и импортировать этот класс в

<ion-content class=slide-zoom> 
    <ion-slides> 

    <ion-slide> 
.............. 
    </ion-slide> 


    <ion-slide> 
.............. 
    </ion-slide> 
    </ion-slides> 


    </ion-content> 

Answer 6

для более дизайна глаз кэширования:

установить высоту родительского ящика до нужной высоты (exmp 300px)

множества переполнения img и минимальной высоты для покрытия всей высоты для изображений короче 300px:

.box img{ 
    overflow: hidden; 
    min-height: 300px; 

} 
.slider-slides{ 
    height:300px; 
}