Ionic slides are infinetely sliding

Ionic Framework ionic-v3
1

Hi, I have the following code in which I have a page in which I have 2 sliders:

<ion-row padding-left>
    <ion-col style="padding-bottom: 0;">
        <ion-slides zoom="false" style="padding: 0; ">
            <ion-slide [class.oculto]="!oculto" *ngFor="let video of lista.videos">
               <button class="boton-slider" (click)="verVideo(video, lista.nombre)">
                  <ion-thumbnail>
                     <img [src]="video.miniatura">
                  </ion-thumbnail>
                  <div *ngIf="video.visto" class="video-visto-lista">
                     <ion-chip color="primary">
                        <i class="icon-sm icon-ophthalmology" aria-hidden="true"></i>
                        <span class="label-chip">Visto</span>
                     </ion-chip>
                  </div>
                   <p class="titulo-video">{{video.titulo}}</p>
                </button>
             </ion-slide>
          </ion-slides>
       <ion-slides style="height: 0;"></ion-slides>
    </ion-col>
  </ion-row>

Then my problem is that even if there are no more elements, the slides keeps going now and then I can’t scroll back to the left. Here is a gif:

ezgif-4-515bf3557554%20(1)

Please help :frowning:

2

Okay, it turns out that this was because I was resizing every slide to make the img smaller with the following:

ion-slide {
width: 55% !important;
margin-right: 15px !important;

}

But Ionic seems to calculate the maximum sliding with the slidesPerView and spaceBetween and as I didn’t have them set in the HTML tag it was taking the default values which are 1 and 0 respectively.

So what I’ve done is to add these two propiertes to my HTML tag:

<ion-slides spaceBetween="15" slidesPerView="1.75" zoom="false" style="padding: 0; ">

and edited my styles for the slides to the following in order for it to fit properly to:

ion-slide {
width: 18rem !important;
margin-right: 15px !important;
}

Incase you wonder why do I also edit the width and margin of the slides on the scss it’s because before doing this I was using spaceBetween and slidesPerView but they were doing an awful effect where the images are big and then resize and move to fit what I set on those values because of these 2 little guys fault.

A bit dirty workarround for this buggy component.

This should be checked out by Ionic’s team…