離子3 - 離子載玻片在瀏覽器上不工作

在離子3中，我使用離子載玻片;在Android和iOs應用程序中一切正常：我可以滑動每一行，其他行保持不變。離子3 - 離子載玻片在瀏覽器上不工作

在試圖使用鼠標「滑動」的瀏覽器上沒有任何按預期工作;如果我刷第一行，第二行和第三行的幻燈片也會改變位置。

這是我的模板：

<ion-card *ngFor="let channel of channels; let i = index;"> 
     <ion-card-header {{channel.title}}</ion-card-header> 
     <ion-card-content> 
      <ion-slides slidesPerView=4 spaceBetween="5"> 
       <ion-slide *ngFor="let video of channels[i].playlist"> 
        <img src="https://.../thumbs/{{video.mediaid}}"/> 
       </ion-slide> 
      </ion-slides> 
    </ion-card-content> 
</ion-card>

什麼我失蹤？

我也嘗試使用next和prev按鈕，但我找不到通過swiper選項（從Ionic 3.0.0幻燈片輸入選項已被刪除）的方法。

我應該如何初始化滑塊？

在組隊，探索我應該設置：

{ ..., 
nextButton: '.swiper-button-next', 
prevButton: '.swiper-button-prev', 
... 
}

來源

2017-06-17 madHorse

如果使用瀏覽器，你檢查的移動設備（如iPhone 4）和命中重裝，不它如預期一樣？ – maninak

是的，它完美的工作 – madHorse

檢查，它有你需要的一切。

你可以，例如有一個按鈕去這樣的下一張幻燈片：

<button ion-button (click)="goToNextSlide()">Next</button>

import { QueryList, ViewChildren } from '@angular/core'; 
import { Slides } from 'ionic-angular'; 

class MyPage { 
    @ViewChildren(Slides) slides: QueryList<Slides>; 

    goToNextSlide() { 
    this.slides.forEach((slide) => { slide.next(); }); 
    } 
}

來源

2017-06-17 12:05:18 maninak

我有多個幻燈片行。當我點擊按鈕時（如在答案中），只有第一行中的幻燈片繼續前進。也許我應該擁有和幻燈片行一樣多的@ViewChild實例;但我不知道如何 – madHorse

從你的問題中不清楚你有多行。然後只需使用'@ ViewChildren'。檢查我上面的更新代碼。 – maninak

非常感謝您的提示。爲了避免所有的幻燈片在一起移動，我已經找到了這種方式： 'nextSlide（i）{this.slides.forEach（（slides，index）=> {index == i} {slides.slideNext（）; } }） \t}' 有沒有更好的方法來獲得相同的結果？ – madHorse

離子3 - 離子載玻片在瀏覽器上不工作

回答

相關問題