在離子菜單中實施離子載玻片不起作用

Question

我正試圖在Ionic-3的側面菜單中實現“滑動圖像”。

以下是我的代碼：

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

元素正確渲染，但問題是<ion-slide>的行為類似於側面菜單中的水平滾動視圖。

我試圖禁用側面菜單的滑動手勢，但仍然存在<ion-slide>的行為。

即使我曾嘗試使用Slides slideNext和slidePrev方法，但它們無法正常工作。

有沒有什么辦法可以使用Ionic-3或第三方庫在側邊菜單中實現滑動圖像？

Answer 1

驗證菜單中的離子載玻片，這些在側面菜單中的行為是正常的。 看看這個鏈接。 這些幻燈片只是具有不同顏色背景的幻燈片。

實施是在以下部分：

 @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

完成這項工作需要一些引導才能使底層Swiper庫正確初始化。 離子菜單以display:none開頭，因此clientWidth無法使用幻燈片容器上的clientWidth正確讀取大小。

有關如何處理此問題的代碼，請參閱我的答案： 是否可以在離子側欄中使用幻燈片