angular中使用swiper

参考： https://www.jb51.net/article/143450.htm

装包：

npm install swiper --save npm install @types/swiper --save

angular-cli.json中：

"styles": [ "../node_modules/swiper/dist/css/swiper.min.css" ], "scripts": [ "../node_modules/swiper/dist/js/swiper.min.js" ],

注：…/，不是./

tsconfig.app.json：

"types": ["swiper"]

tsconfig.json：

"typeRoots": [ "node_modules/@types" ],

ts中：

import Swiper from "swiper"; // 轮播图 setTimeout(()=>{ new Swiper('.swiper-container', { navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, // loop: true, // 如果需要分页器 pagination: { el: '.swiper-pagination', }, }); })

注：延时执行了，要不然没有马上刷出来左右箭头

<div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide" *ngFor="let data of slides"> <img [src]="data" alt="" width="100%"> </div> </div> <!-- 如果需要分页器 --> <div class="swiper-pagination"></div> <!-- 如果需要导航按钮 --> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div> .swiper-container { width: 100%; height: 400px; } .swiper-slide { text-align: center; font-size: 18px; background: #fff; /* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; }