调整离子幻灯片时间以每天更换幻灯片

Question

I tried to implement carousel in my ionic application and While going through Ionic documentation I found ionic-slides does same things. How do I change the timing of slide ? I tried using following code but it doesn't shows any changes to the slide. It keeps sliding frequently although I changed the time. I want to keep change slide after 24 hrs.

.ts

option = {
    slidesPerView: 1,
    speed: 86400000,
    centeredSlides: true,
    loop: true,
    spaceBetween: 5,
    autoplay: true,
  };

.html

  <ion-slides [options]="option">
    <ion-slide>
      <ion-card>
        <img src="../../../assets/image01.jpg" />
      </ion-card>
    </ion-slide>
    <ion-slide>
      <ion-card>
        <img src="../../../assets/image02.jpg" />
      </ion-card>
    </ion-slide>
    <ion-slide>
      <ion-card>
        <img src="../../../assets/image03.jpg" />
      </ion-card>
    </ion-slide>
  </ion-slides>

.scss

ion-card {
  width: 100%;
  height: 500px;
  box-shadow: none;

  img {
    object-fit: cover;
    width: 100%;
  }
}

.swiper-slide-active {

  ion-card {
    img {
      transform: scale(1, 1);
    }
  }
}

.swiper-slide {
  transition: 1000ms all ease-in-out;
}

thank you.

Answer 1

You could leverage the Ionic slider methods to control the slide behavior with more control vs using the configuration object. The below example demonstrates one proof of concept, but I do add some edge case and further considerations for improvement.

First thing you would need to do is reference Ionic Slides in your component like so:

import { IonSlides } from '@ionic/angular';

export class HomePage implements OnInit {

  @ViewChild(IonSlides, { static: true }) slides: IonSlides;

Second, you would then need to write some code that would call Ionic's nextSlide based on the 24 hour threshold. I would start off with a smaller threshold for testing purposes before expanding to 24 hours. Here is some psuedo code to demonstrate the idea:

// need to call this every on a triggered interval (be cautious of memory leaks)
nextSlide = () => {
    
    this.now = Date.now();

    this.elapsed = this.now - this.last;

    if (this.elapsed > this.threshold) {

      this.slides.getActiveIndex().then((activeIndex)=> {
        
        if(activeIndex < this.slideCount) {
          this.slides.slideNext();
        }
        else {
          this.slides.slideTo(0);
        }

      })
       
    }
}

I would consider the following before continuing with the implementation:

• Should the threshold be mapped to a user vs browser session instance? This would open door to being more precise, because you can persist the user's last visit and compare - see pseudo code
• Be careful of memory leaks when building out the threshold logic. If using intervals or setTimeouts, be sure to clear them in the correct Ionic lifecycle methods .