Как сделать динамический ионный скролл с анимацией?

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