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

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-subtitle> </ion-card-subtitle>
            <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>


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

1 Like

Hello, Use ionic slides


you can play with slidesPerView cant

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


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


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

  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;
  background-color:  rgba(194, 193, 194, 0.52);


Espero te sirva…

1 Like

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

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

Check in docs stopAutoplay method

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

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

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

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