How to make a dynamic ion-scroll with animation?

@exe988 wrote:

I’m creating a scrolling image horizontally but it is too simple and boring i wan’t 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 so everyone is welcome to show off their answers. Thank you for you future answers guys and god bless.

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.css

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

    }

Posts: 1

Participants: 1

Read full topic