Implementation of ion-slides in ion-menu not working

Question

I am trying to implement "sliding images" in side-menu of Ionic-3.

Following is my code :

<ion-menu [content]="content">
  <ion-content>
        <ion-slides>
            <ion-slide>
                <img class="slide-image" src="img1.png">
            </ion-slide>
            <ion-slide>
                <img class="slide-image" src="img2.png">
            </ion-slide>
            <ion-slide>
                <img class="slide-image" src="img3.png">
            </ion-slide>
        </ion-slides>

        <ion-list>
          <p>some menu items</p>
        </ion-list>
  </ion-content>
</ion-menu>

<ion-nav [root]="rootPage" #content></ion-nav>

The elements are rendering properly but the problem is that the <ion-slide> is behaving like horizontal scroll view in side menu.

I have tried to disable the swipe gesture of side-menu but still the behavior of <ion-slide> persist.

Even I have tried to use slideNext and slidePrev method of Slides but they are not working.

Is there any way I can implement the sliding-images in side-menu either using Ionic-3 or third party library?

I don't understand what the problem is? How do you want slide to behave? — Jose Rojas, Jun 02 '17 at 14:22
@JoseRojas I want to behave it like "slide". I mean when I scroll little bit to left, It should automatically slide to the next slide-image but It just scroll that "little bit" like a horizontal scroll. When I put the same `` code in some page-body, It behaves perfectly. — Rohit Gupta, Jun 05 '17 at 06:05

score 0 · Answer 1 · answered Jun 07 '17 at 15:28

Verifying the ion-slides in the menu, the behaviour of these is normal in the sidemenu. Take a look in this link. these slides are only slides with a backgrounds of different colors.

the implementation is in the part of:

 @App({
  template: `
    <ion-menu [content]="content">

      <ion-toolbar>
        <ion-title>Pages</ion-title>
      </ion-toolbar>

      <ion-content>
        <ion-slides pager>

          <ion-slide style="background-color: green">
            <h2>Slide 1</h2>
          </ion-slide>

          <ion-slide style="background-color: blue">
            <h2>Slide 2</h2>
          </ion-slide>

          <ion-slide style="background-color: red">
            <h2>Slide 3</h2>
          </ion-slide>

        </ion-slides>
      </ion-content>

    </ion-menu>

    <ion-nav id="nav" [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

  `
})

score 0 · Answer 2 · answered Jun 29 '19 at 17:34

Making this work requires a little bit of bootstrapping in order to get the underlying Swiper library to properly initialize. The ion-menu starts out with display:none, so Swiper cannot properly read the size using clientWidth on the slide container.

See my answer here for code that shows how to deal with this problem: Is it possible to use slides in ionic sidebar

Implementation of ion-slides in ion-menu not working

2 Answers2