在離子菜單中不執行離子幻燈片的工作

我試圖在離子-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>的行爲。

即使我試圖使用slideNext和slidePrev方法Slides但他們不工作。

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

來源

2017-06-02 Rohit Gupta

我不明白的問題是什麼？你想如何幻燈片表現？ –

@JoseRojas我想表現得像「幻燈片」。我的意思是，當我向左滾動一點時，它應該自動滑動到下一張幻燈片圖像，但它只是像滾動一樣滾動「一點點」。當我在某個頁面主體中放入相同的''代碼時，它的表現完美無瑕。 –

驗證菜單中的離子滑塊，這些行爲在sidemenu中是正常的。看看this鏈接。這些幻燈片只是具有不同顏色背景的幻燈片。

實現是在部分：

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

    ` 
})

來源

2017-06-07 15:28:40

在離子菜單中不執行離子幻燈片的工作

回答

相關問題