0

I have used ion-slides in my project. The code is given below:

<ion-grid class="ion-margin-left">
    <ion-slides [options]="slideConfig">
        <ion-slide *ngFor="let item of items">
            <ion-card style="margin-right: 2px">
                <div class="img-container">
                    <img src="/assets/contents/gif_icon/{{item.imgName}}" class="img-style">
                </div>
                <ion-card-content>
                    <p>{{item.title}}</p>
                </ion-card-content>
            </ion-card>
        </ion-slide>
    </ion-slides>
</ion-grid>

The slide was working perfectly before using slideConfig options autoplay: true. The slide configuration options code is given below.

this.slideConfig = {
   slidesPerView: window.innerWidth / 140,
   autoplay: true
};
  @HostListener('window:resize', ['$event'])
  onResize(event) {

  this.slideConfig = {
    slidesPerView: window.innerWidth / 140,
    autoplay: true
  };
}

The problem mainly occurs when I rotate the screen. I am trying to show cards which width will be 120px. And which will be always 120px even after rotating? Before rotating the card was slide normally but after rotate the card was sliding too fast. So How can I fix this issue?

Please, Note one thing, Whenever I rotate the slidesPerView will be dynamic. For example, in the portrait mode slidesPerView might be 3 for a device. For the same device if the user rotates the device then slidesPerView might be 5. To achieve this I have used @HostListener('window: resize') function. But if I load the project in portrait mode then if I rotate the device then autoplay slide a little bit fast. I know the problem was occurring because of slidesPerView is dynamic. But I cannot fixed the slidesPerView and at the same time, the slide needs to be autoplay. How can I achieve this?

MD. IBRAHIM KHALIL TANIM
  • 649
  • 1
  • 10
  • 14

1 Answers1

1

Try this:

Component.ts

import { Component, HostListener, ViewChild } from '@angular/core';
import { IonSlides } from '@ionic/angular';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  @ViewChild('slides',null) slides: IonSlides;

  slideOpts = {
    slidesPerView: 1,
    autoplay: true,
    speed: 600,
    slidesPerColumn: 'auto'
  };

  @HostListener('window:resize', ['$event'])
  onResize(event) {
    setTimeout(() => this.slides.update(), 100); 
  }
  constructor() { }

}

HTML

<ion-slides pager="true" [options]="slideOpts" #slides>
</ion-slides>

You can change the speed to run faster or slower if you want with property speed in option.

Khanh Le Tran
  • 860
  • 4
  • 15
  • your expectation is when you rotate or not the card just has 120px width right ? – Khanh Le Tran Jan 20 '20 at 07:13
  • can you tell me you use the `@HostListener('window:resize', ['$event'])` for which goal ? i haven't understood your goal yet. – Khanh Le Tran Jan 20 '20 at 07:16
  • I have used `@HostListener('window:resize', ['$event'])` so that I can get `dynamic` `slidesPerView`. `slidesPerView` will be changed according to the screen size. I have edited my question. Maybe you will now understand what I am trying to achieve. – MD. IBRAHIM KHALIL TANIM Jan 20 '20 at 08:39
  • Do you try my answer? I think it will solve your problem. I make a demo with the above answer. – Khanh Le Tran Jan 20 '20 at 08:47
  • i use ionic 4.7.1 – Khanh Le Tran Jan 20 '20 at 09:23
  • I have tried your solution. But it is not working for me. As my `slidersPerView` is dynamic that's why it is not working. If I fixed the `slidesPerView` then it is working. In your solution, you also fixed the `slidesPerView: 1` that is why your solution is working in your demo. But what I want is ` slidesPerView` to be dynamic and it should `autoplay` normally when `rotate` the `screen`. Please try to use `slidesPerView dynamic` then you might see the actual problem. – MD. IBRAHIM KHALIL TANIM Jan 21 '20 at 03:19
  • Thanks for your answer, your answer might not the solution that I want. But your answer help me to get the solution. – MD. IBRAHIM KHALIL TANIM Jan 21 '20 at 12:40
  • https://i0.wp.com/devdactic.com/wp-content/uploads/2018/10/ionic-4-dynamic-slides.gif?resize=520%2C1024&ssl=1 You need something like this ? The number items show will be depend on the screen width? – Khanh Le Tran Feb 10 '20 at 03:27