How to make a dynamic ion-scroll with animation?

问题

I'm creating a scrolling image horizontally but it is too simple and boring. I want it to be dynamic like if I click the image at the right side it will automatically move at the left side and display a different description.

I don't have any idea how to make this happen.

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;
    }   
}

来源：https://stackoverflow.com/questions/58390602/how-to-make-a-dynamic-ion-scroll-with-animation