具有不同高度的离子滑块

我使用的是ion-slide-box，但问题是，我的ion-slide s不在同一高度，因此它将所有ion-slide s设置为高度一。下面是一个例子具有不同高度的离子滑块

离子滑动1高度30PX
离子滑块2高度100像素

所以，ion-slide-box高度将是100像素，其在滑件1使一个空白空间（70像素）。当用户通过使用该空白区域（70px）进行滑动时，slider不起作用。

如何让slidebox适用于不同的幻灯片高度有什么方法/解决方法？

来源

2015-02-09 sameera207

好问题！我也想要答案！ * - * – VVL 2015-02-13 16:11:10

@VVL没有发现队友，但我正在研究一种解决方法，将身高设为100％，但仍然没有运气:) – sameera207 2015-02-16 12:57:59

同样在这里。任何解决方案？ – Frade 2016-08-25 10:39:42

如果你想与每一个幻灯片填充滑块高度不留任何空白固定高度滑块，在style.css中添加这些行：

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

来源

2015-04-04 07:50:42

它将导致滑块左侧的垂直线。 – 2015-04-12 23:43:31

-1

$ionicScrollDelegate.resize(); did the trick

检查this为codepen

来源

2015-06-12 10:08:41 bCliks

这实际上并不起作用，因为它计算滑块的大小（最长的幻灯片），而不是幻灯片本身。 – 7200rpm 2015-11-05 23:43:14

你可以用这个：

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

来源

2015-09-18 12:58:29 Mao

谢谢，它的作品！ – 2017-05-20 05:59:50

你可以使用柔性框组织幻灯片高度：

.slider-slides { 
    display: flex; 
}

不要忘了复位幻灯片高度和所有的幻灯片将得到最大高度:)

.slider-slide { 
    height: auto; 
}

来源

2016-06-15 18:17:39 luckakashi

强大的文本 如果你是使用离子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>

来源

2017-01-21 09:57:27

这与离子滑块{overflow-y：auto}的组合为我工作。非常感谢！ – gamengineers 2017-05-31 19:21:01

的多个心眼缓存设计：

设置父框的高度，以你想要的高度（exmp 300像素）

集img溢出和最小高度以覆盖所有高度的图像短于300px：

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

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

来源

2017-03-25 14:59:03

具有不同高度的离子滑块

回答

相关问题