如何制作带有动画的动态离子卷轴？

Question

我正在水平创建滚动图像，但是它太简单又无聊。我希望它具有动态性，例如，如果单击右侧的图像，它将自动在左侧移动并显示其他 描述。

我不知道该如何实现。

home.html

<ion-scroll scrollX="true">       
    <ion-card class="scroll-card">
        <div style="display: flex;">
            <div style="padding-left: 10px; padding-top: 10px;">
                <p style="color: white;">House Design</p>
                <p style="color: white;">Phase No.</p>
                <p style="color: white;">Building No.</p>
                <p style="color: white;">Block No.</p>
            </div>

            <div>
                <img src="assets/imgs/unit-img.png">
            </div>
        </div>
    </ion-card>

    <ion-card class="scroll-card">
        <img src="assets/imgs/unit-img.png">
    </ion-card>

    <ion-card class="scroll-card">
        <img src="assets/imgs/unit-img.png">
    </ion-card>
</ion-scroll>

home.scss

.scroll-zoom-wrapper {
    white-space: nowrap;
}

ion-card {
    background-color: #589ba8;
    height: 145px; 
    width: 250px;
    margin-right: 10%;
    display: inline-block;
}

ion-scroll {
    white-space: nowrap;
    min-height: 177px; 
    height: auto;

    .scroll-content {
        padding: 0px !important;
    }   
}