最后一张幻灯片上的 ionic 4 离子滑块锁定

Question

我正在开发一个具有水平滑动离子滑块的 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>

Answer 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>

应用网址 = enter link description here

编辑网址 = enter link description here

您已使用剩余 25% 的保证金。这是我认为的问题