Ion-slider in ion-menu not working

Ionic Framework ionic-v3
1

created a side menu project with:

ionic start mySideMenu sidemenu --v2

added ion-slides.

The slider only show first slide and no slide to next slide is working.

 <ion-menu [content]="content">
  <ion-header>
    <ion-toolbar>
      <ion-title>Menu</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content>

    <ion-slides>
      <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>

    <ion-list>
      <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
        {{p.title}}
      </button>
    </ion-list>
  </ion-content>

</ion-menu>

<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
2

I’m trying to do the same and the slider doesn’t work at all.

Have you been able to find a solution?

Is it simply not possible to use ion-slides in ion-menu?

EDIT:

So I’ve found the solutions in the end. Posting this in case it helps somebody else in the future.

I was going through the issues related to slides and came across this particular one:

It turns out that if slides are not visible, it won’t be initialized properly. So I just needed to update it.

Here’s the code I used:

app.component.ts

import { ViewChild } from '@angular/core';
import { Slides } from 'ionic-angular';

...

@ViewChild('switcher') switcher: Slides;

...

  menuOpened() {
    this.switcher.update();
  }

app.html

<ion-menu [content]="content" (ionOpen)="menuOpened()">

...

<ion-slides #switcher>

It appears to be working fine after this. Hope this helps another frustrated soul!

2 Likes
3

Thanks it’s really helpful

Thanks

4

bug(slides): pager not set correctly after being hidden

https://github.com/driftyco/ionic/issues/10212 can any one found solution for this problem

5

nice but pagination bullets are not showing activeness correctly when we use pager property to slides. and slideTo not working
menuOpened() {
this.switcher.update();
this.switcher.slideTo(1,200); //this line not working and not showing index 1 slide and pagination bullets are also not shoowing activeness correctly
}

6

navigation bar menu is not working after the successful event booking.Anyone can any idea about this issue