ionic-frameworkion-slides

Ionic 4 Slides - Set An Initial Slide


Is it possible to select a slide to display with a focus on as the initial one? I have an array of items to display in Ionic slides, and I want to "preselect" (= put focus on the slide) based on preferences but keep the order.

I have read the Ionic documentation, but I am probably missing something. So far it looks I would need to use the slideTo function in the constructor of the page, but I was looking for a directive to use directly in the html template.

Thank you for any info.


Solution

  • .html

     <ion-slides pager="true" [options]="slideOpts">
          <ion-slide>
            <h1>Slide 1</h1>
          </ion-slide>
          <ion-slide>
            <h1>Slide 2</h1>
          </ion-slide>
          <ion-slide>
            <h1>Slide 3</h1>
          </ion-slide>
        </ion-slides>
    

    .ts

     slideOpts = {
        initialSlide: 2,
        speed: 400
      };
    

    all the options are here http://idangero.us/swiper/api/