How to create a Horizantal scroll with cards in ionic 4?

Ionic Framework
1

I am designing a sample map app

I am having a problem

In my app it is difficult to scroll the cards horizontally

I have to try multiple Times to scroll cards
.
Sometimes the cards are scrolling but not working many times

my Code

map page

  <div class="scrolling-wrapper">
        <div class="card" *ngFor="let hotel of hotels">

          <ion-card (click) = "markMap(hotel)">
            <ion-card-header>
              <ion-card-subtitle> </ion-card-subtitle>
              <ion-card-title></ion-card-title>
            </ion-card-header>
          
            <ion-card-content  style="text-align: center ;color: black">
                <svg style="width:24px;height:24px" viewBox="0 0 24 24">
                    <path fill="#000000" d="M15,14C12.33,14 7,15.33 7,18V20H23V18C23,15.33 17.67,14 15,14M6,10V7H4V10H1V12H4V15H6V12H9V10M15,12A4,4 0 0,0 19,8A4,4 0 0,0 15,4A4,4 0 0,0 11,8A4,4 0 0,0 15,12Z" />
                </svg> <br/>
              <span >{{hotel.hotelName}}</span>
            </ion-card-content>
          </ion-card>

        </div>
        
        
      </div>

map page scss


.map {
    height: 80%;
  }

  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }

  .scrolling-wrapper {
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
  
    .card {
      display: inline-block;
    }
  }

please help me

image
image.jpg364×639 90.4 KB

1 Like
2

Hello, Use ionic slides

3

bandicam2019-08-2611-53-48-023

Ts
you can play with slidesPerView cant

slideOpts = {
      slidesPerView: 10,
      freeMode: true,
      coverflowEffect: {
        rotate: 50,
        stretch: 0,
        depth: 100,
        modifier: 1,
        slideShadows: true,
      }
    }

Html

<ion-slides [options]="slideOpts">
  <ion-slide *ngFor="let grupo of grupos">
    <span>
      <img [src]="grupo.ur_imagen" alt="">
    </span>
  </ion-slide>
</ion-slides>

Css…

span{
  padding-left: 2px!important;
  padding-right: 2px!important;
  padding-top: 2px!important;
  padding-bottom: 2px!important;
  width: 85px!important;
  height: 70px!important;

}
ion-slide:hover{
  background: rgba(205, 9, 9, 0.43);
  cursor: pointer;

}
span img{
  width: 55px;
  height: 55px;
}


ion-slide {
  width: 90px!important;
  height: 85px!important;
  background-color:  #FFF;
  float: left;
  margin-left: 1.5px!important;
  margin-right: 1.5px!important;
  border-radius: 50px!important;
}
ion-slides{
  background-color:  rgba(194, 193, 194, 0.52);
}

Captura

Espero te sirva…

1 Like
4

I tried this

But the slides automatically swipes back to first item when I release the finger

I can’t scroll to the items after the screen limit since it automatically slides back to beginning when released

5

Okay.
But you can set a variable to don’t swipe automatically.

Check in docs stopAutoplay method

6

please give a sample code . i am new to ionic and angular

7

you can record the screen to understand more clearly what happens when you release your finger?

8

I think you need this.
change this opction
Only change the freeMode for false

slideOpts = {
      slidesPerView: 10,
      freeMode: false,
      coverflowEffect: {
        rotate: 50,
        stretch: 0,
        depth: 100,
        modifier: 1,
        slideShadows: true,
      }
    }

that will make a drier slide when you release your finger

9

I changed . But still issue persists

I a FB group they suggested to the card to ion footer and follow the old code

I moved them to footer . Now it is working

anyway thanks