在离子菜单中实施离子载玻片不起作用

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?

Answer 1

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>

  `
})

Answer 2

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