如何用Angular结合Swiper插件实现长尾词滚动效果？

本文共计268个文字，预计阅读时间需要2分钟。

将下载的swiper放入assets目录中的第一步：将swiper样式和JS文件引入到index.中，或在angular-cli.json配置文件中添加。

1. 将swiper样式文件`swiper.min.css`放入`assets/dist/css`目录。

2.在`index.`中引入样式和JS：

3.或者在`angular-cli.json`中配置：

json styles: [ styles.scss, /assets/dist/css/swiper.min.css ], scripts: [ /assets/dist/js/swiper.min.js ]

下载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, });