CODEWITHSUNDEEP
ionic-frameworkionic4ionic5
Sunil Manipara
Sunil Manipara

Reputation: 71

Image not slide on pager dots click ionic 5

I'm working in ionic v5. I want to slide images on pager dots click, but it is not working now.

My code is:

 <ion-slides pager="true">
   <ion-slide>
     <p>Page1</p>
   </ion-slide>
   <ion-slide>
     <p>Page2</p>
   </ion-slide>
   <ion-slide>
     <p>Page3</p>
   </ion-slide>
 </ion-slides>
</ion-content>

Upvotes: 1

Views: 1581

Answers (1)

sebaferreras
sebaferreras

Reputation: 44659

By default they are not clickable but, as you can see in the Ionic docs you can set the options of the slider to change that:

options: Options to pass to the swiper instance. See http://idangero.us/swiper/api/ for valid options

Component

import { Component } from "@angular/core";

@Component({
  selector: "app-home",
  templateUrl: "home.page.html",
  styleUrls: ["home.page.scss"]
})
export class HomePage {
  public items = ["Option 1", "Option 2", "Option 3"];

  public sliderOptions = {
    pagination: {
      el: ".swiper-pagination",
      type: "bullets",
      clickable: true
    }
  };
}

Template

<ion-header>
  <ion-toolbar>
    <ion-title>
      Home
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding">
  <h2>Welcome to Ionic!</h2>
  <p>
    Slider with clickable pager:
  </p>

  <ion-slides pager="true" [options]="sliderOptions">
    <ion-slide *ngFor="let item of items">
      <p>{{ item }}</p>
    </ion-slide>
  </ion-slides>
</ion-content>

Please take a look at this stackblitz demo.

demo project

Upvotes: 5

Related Questions