推荐设备MORE

深说免费建站的猫腻

深说免费建站的猫腻

疑难问题

微信小程序潜在优势_Angular6中使用Swiper的方法示

日期:2021-01-08
我要分享
Angular6中使用Swiper的方法示例       这篇文章主要介绍了Angular6中使用Swiper的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧


安装Swiper

npm install swiper --save

或者

yarn add swiper --save

在angular.json文件添加swiper.js和swiper.css

angular.json

安装模组定义档

npm install @types/swiper --save

或者

yarn add @types/swiper --save

配置tsconfig文件

tsconfig.json

tsconfig.app.json

按照上面的配置完成后,angular里就可以用swiper。下面是一个小demo。

<
 div 
 div 
 div *ngFor="let data of slides" 
 img [src]="data" alt="" width="100%" 
 /div 
 /div 
 !-- 如果需要分页器 -- 
 div /div 
 !-- 如果需要导航按钮 -- 
 div /div 
 div /div 
 /div 
import {
 AfterViewInit,
 Component,
 OnInit
} from '@angular/core';
@Component({
 selector: 'app-test',
 '
export class TestComponent implements AfterViewInit {
 testSwiper: Swiper;
 slides = [
 '300x200/FF5733/ffffff',
 '300x200/C70039/ffffff',
 '300x200/900C3F/ffffff'
 constructor() {}
 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',

运行结果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。