angular2——使用swiper插件

swiper插件有这很好的滑动切换效果。用起来还是很不错的。接下来，讲述下怎么在angular2里面使用。

第一步：引入该插件的样式和js文件

在index.html里面移入自己的文件，本例是把文件放入了资源 assets/css或者 assets/js文件夹内。关于如何引用swiper的js文件，参考下官方的文档，你会有不一样的收获。

<link rel="stylesheet" type="text/css" href="./assets/css/swiper-3.4.2.min.css" />
<script type="text/javascript"  src="./assets/js/swiper-3.4.2.min.js"></script>

第二步：在typings.d.ts文件内声明全局的Swiper对象。全局的对象一般都放在这里声明，声明后会自动关联到Swiper.js文件的Swiper对象

declare var Swiper:any;

第三步参照官方的演示文档，把自己的内容放到三个div里面。注意这三个div有着 Swiper的固定的class类。

  <div  class="swiper-container">
    <div  class="swiper-wrapper">
        <div      class="swiper-slide">
编辑自己的内容。
</div>
</div>
</div>

第四步：在ts里初始化自己的Swiper对象

  ngOnInit(): void {
   
      var swiper = new Swiper('.swiper-container',{
pagination : '.swiper-pagination',direction : 'horizontal',paginationClickable: true,longSwipesRatio: 0.3,touchRatio:1,observer:true,//修改swiper自己或子元素时，自动初始化swiper
    observeParents:true,//修改swiper的父元素时，自动初始化swiper
});
  }

angular2——使用swiper插件

相关文章