angular——使用swiper插件

下载swiper到assets目录中

assets/dist

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

在index.html中引入

   
  

或者在angular-cli.json脚手架中引入
"styles": [
    "styles.scss",
    "./assets/dist/css/swiper.min.css"
],
    "scripts": [
    "./assets/dist/js/swiper.min.js"
],

建议在脚手架中引入

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

declare var Swiper: any;

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

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

const mySwiper = new Swiper ('.swiper-container', {
      direction: 'horizontal',
      loop: true,

      // 如果需要分页器
      pagination: {
        el: '.swiper-pagination',
      },

      // 自动播放
      autoplay: true,
    });