我正在开发带有可水平滑动的离子滑块的ionic 4移动应用程序。滑块正在工作。但我无法停止最后一张幻灯片的滑动。我需要将最后一张幻灯片锁定在滑块上。
<div style="float: left; width: 100%">
<ion-slides [options]="sliderConfig" style="width: 100%" #slides>
<ion-slide style=" margin-left: -30%">
<div style="float:left">
<!-- <ion-card style="width: 180px; height: 200px;" >
<ion-card-content> -->
<ion-avatar style="height: 110px;width: 110px" align="center">
<img src="../../../assets/f1.jpg" style="width: 100%; height:100%" />
</ion-avatar>
<!-- <img src="../../../assets/food.jpg" style="width:220px; height:200px"/> -->
<ion-label>
Promo
</ion-label>
<!-- </ion-card-content>
</ion-card>
-->
</div>
</ion-slide>
<ion-slide style="margin-left: -20%">
<div style="float:left">
<ion-avatar style="height: 110px;width: 110px" align="center">
<img src="../../../assets/food.jpg" style="width: 100%; height:100%" />
</ion-avatar>
<ion-label>
New
</ion-label>
</div>
</ion-slide>
<ion-slide style="width:100%; margin-left: -20%">
<div style="float:left">
<ion-avatar style="height: 110px;width: 110px" align="center">
<img src="../../../assets/sri.jpg" style="width:100%; height:100%" />
</ion-avatar>
<ion-label>
Sri Lankan
</ion-label>
</div>
</ion-slide>
答案 0 :(得分:1)
请尝试以下代码。我做了一些修改。
<div style="float: left; width: 100%">
<ion-slides style="width: 100%" #slides>
<ion-slide>
<ion-card style="width: 180px; height: 200px;" >
<ion-card-content>
<ion-avatar style="height: 110px;width: 110px" align="center">
<img src="https://www.google.com/url?sa=i&source=images&cd=&ved=2ahUKEwjavZyClMXiAhVFVH0KHcbcAu4QjRx6BAgBEAU&url=https%3A%2F%2Fwww.pexels.com%2Fsearch%2Fnature%2F&psig=AOvVaw3lI4NtiR2SsIzSprapcqzp&ust=1559371058163196" style="width: 100%; height:100%" />
</ion-avatar>
<ion-label>
Promo
</ion-label>
</ion-card-content>
</ion-card>
</ion-slide>
<ion-slide>
<ion-card style="width: 180px; height: 200px;" >
<ion-card-content>
<ion-avatar style="height: 110px;width: 110px" align="center">
<img src="https://www.google.com/url?sa=i&source=images&cd=&ved=2ahUKEwjavZyClMXiAhVFVH0KHcbcAu4QjRx6BAgBEAU&url=https%3A%2F%2Fwww.pexels.com%2Fsearch%2Fnature%2F&psig=AOvVaw3lI4NtiR2SsIzSprapcqzp&ust=1559371058163196" style="width: 100%; height:100%" />
</ion-avatar>
<ion-label>
Promo
</ion-label>
</ion-card-content>
</ion-card>
</ion-slide>
<ion-slide>
<ion-card style="width: 180px; height: 200px;" >
<ion-card-content>
<ion-avatar style="height: 110px;width: 110px" align="center">
<img src="https://www.google.com/url?sa=i&source=images&cd=&ved=2ahUKEwjavZyClMXiAhVFVH0KHcbcAu4QjRx6BAgBEAU&url=https%3A%2F%2Fwww.pexels.com%2Fsearch%2Fnature%2F&psig=AOvVaw3lI4NtiR2SsIzSprapcqzp&ust=1559371058163196" style="width: 100%; height:100%" />
</ion-avatar>
<ion-label>
Promo
</ion-label>
</ion-card-content>
</ion-card>
</ion-slide>
</ion-slides>
App Url = enter link description here
编辑器网址= enter link description here
您已使用了25%的保证金。我认为这就是问题