如何用Angular集成并使用swiper插件实现滑动效果？

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

将以下内容简化并修改：

原内容：下载swiper到assets目录中，第一步：引入该插件的样式和js文件，在index.中引入或则在angular-cli.json脚本框架中引入。具体操作如下：在angular-cli.json中添加'styles': ['styles.scss', '/assets/dist/css/swiper.min.css'], 'scripts': ['./assets']

简化版：将swiper放入assets目录。在angular-cli.json中添加样式和脚本路径：'styles': ['styles.scss', '/assets/dist/css/swiper.min.css'], 'scripts': ['./assets']

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