发表于： 2019-10-11 21:35:43
0 748
今天完成的事情：
swiper是一款功能强大的插件，可以实现很多我们意想不到的轮播效果。
首先附上Swiper官方中文网站：https://www.swiper.com.cn/
1、安装Swiper
npm install swiper --save
2、在angular.json文件添加swiper.min.js和swiper.min.css
3、安装模组定义档
npm install @types/swiper --save
4、配置tsconfig文件
（原本已有，无需添加）
在tsconfig.app.json中添加：
按照上面的配置完成后，angular里就可以使用swiper啦~
下面是一个小Demo：
test.component.ts
import { Component, OnInit, AfterViewInit } from '@angular/core';import Swiper from 'swiper';@Component({ selector: 'app-test', templateUrl: './test.component.html', styleUrls: ['./test.component.less'],})export class TestComponent implements OnInit, AfterViewInit { testSwiper: Swiper; slides = [ 'https://via.placeholder.com/300x200/FF5733/ffffff', 'https://via.placeholder.com/300x200/C70039/ffffff', 'https://via.placeholder.com/300x200/900C3F/ffffff' ]; constructor() { } ngOnInit() { } ngAfterViewInit() { this.testSwiper = new Swiper('.swiper-container', { direction: 'horizontal', // 水平切换选项 loop: true, // 循环模式选项 // 如果需要分页器 pagination: { el: '.swiper-pagination', }, // 如果需要前进后退按钮 navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, // 如果需要滚动条 scrollbar: { el: '.swiper-scrollbar', }, }); }}
test.component.html
<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>//导航等组件可以放在container之外
test.component.less (你可能想要给Swiper定义一个大小)
.swiper-container { width: 600px; height: 300px;}
效果如图：
————————————————
版权声明：本文为CSDN博主「Li_OAOA」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/sinat_38930182/article/details/89332748
返回列表
评论