Ionic 2幻灯片组件-如何访问Swiper API

史蒂夫·哈比克

在应用程序欢迎页面/幻灯片上使用离子幻灯片组件(4个幻灯片)。我需要用户跳到上一张幻灯片的功能。Docs说Swiper API的ion-slides实现我需要访问类似的方法:mySwiper.slideTo(index, speed, runCallbacks);

提示如何执行?

您可以在options属性内传递一个函数。

原始答案

@Component({
  selector: 'my-component',
  template: '<ion-slides [options]="options">
               <ion-slide>Slide1</ion-slide>
               <ion-slide>Slide2</ion-slide>
             </ion-slides>',
  directive: [IONIC_DIRECTIVES]
})
export class MyComponent {
  public slider: any;

  constructor() {
    this.options = {
      onlyExternal: false,
      onInit: (slides: any) =>
        this.slider = slides
    }
  }

  click() {
    this.slider.sliderNext(true, 250);
  }
}

有关更多选项,请查看swiper api

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何使用Swiper库在Ionic2中创建幻灯片/转盘

如何在幻灯片底部放置按钮 - Ionic

自定义 Ionic 幻灯片组件 {Slides} 导入引用仅更新上次创建的幻灯片组件

如何转到2张幻灯片

Ionic 2 幻灯片自动播放

Ionic2显示多个幻灯片。或部分

Ionic 4幻灯片-设置初始幻灯片

Swiper - 移动幻灯片

Google幻灯片API-如何多次复制幻灯片并每次创建唯一的对象ID

如何在ionic中为嵌套选项卡栏添加幻灯片功能?

如何降低ionic1幻灯片框的自动播放速度?

如何在React中的Ionic 5中锁定幻灯片

如何检测swiper js中的当前幻灯片?

如何检测swiper js中的当前幻灯片?

jQuery Swiper幻灯片高度

每张幻灯片如何显示2张图像?

如何分离幻灯片

(IONIC SLIDER)从其他标签返回时如何设置默认的第一张幻灯片

Owl Carousel 2 如何在每张幻灯片上显示所有幻灯片标题

向Ionic2的离子幻灯片添加水平滚动条

如何通过单击 swiper.js 中的所需幻灯片来更改居中幻灯片?

ionic3 幻灯片滑动灵敏度

Ionic App中模态的“离子-幻灯片箱”问题

Ionic 4 Vue-获取幻灯片索引

Ionic 3幻灯片无法自动播放

如何使用钩子将w3school幻灯片放到reactJS组件中?

Google幻灯片API无法从页面实例(Node.Js)读取幻灯片的内容

幻灯片创建时高级幻灯片 api 未使用预定义布局

如何使用 Google 幻灯片 API(Google 应用程序脚本)将超链接插入文本中