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

Ionic Framework
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