angular7中使用swiper轮播图插件

swiper中文官网

https://www.swiper.com.cn/

安装 插件

npm / cpm

npm install swiper --save  || yarn add swiper --save
npm install @types/swiper --save || yarn add @types/swiper --save

配置

1. angular.json

   "styles": [
      "src/styles.scss",
      "src/assets/iconfont/iconfont.css",
      "node_modules/swiper/dist/css/swiper.min.css" // 引入css文件
    ],
    "scripts": [
        "node_modules/echarts/dist/echarts.js",
        "node_modules/swiper/dist/js/swiper.min.js" // 引入js文件
    ],
   

使用

ts文件中

import Swiper from 'swiper';

export class HomeComponent implements OnInit {

    // 轮播数据
    swiperList: any[] = [];

    constructor() { }

    ngOnInit() {

        // 轮播图初始化
        setTimeout(() => {
            this.swiperInit();
        }, 0);

        this.swiperList = [
            {
                imgUrl: 'http://www.yyth.com.cn/uploadDir/jpg/20190111/1547185316391.jpg'
            },
            {
                imgUrl: 'http://www.yyth.com.cn/uploadDir/jpg/20181229/1546050204895.jpg'
            },
            {
                imgUrl: 'http://www.yyth.com.cn/uploadDir/jpg/20181229/1546061999592.jpg'
            }
        ];
    }

    // 轮播图初始化
    swiperInit() {
        // tslint:disable-next-line: no-unused-expression
        new Swiper ('.swiper-container', {
            direction: 'horizontal', // 水平切换选项
            loop: true, // 循环模式选项
            speed: 600, // 滑动时间
            grabCursor: true, // 鼠标指针形状
            autoplay: {
                delay: 1500,
                stopOnLastSlide: false,
                disableOnInteraction: false // 手动滑动之后依然自动轮播
            }, // 自动滑动
            effect : 'fade', // 切换效果
            observer: true, // 修改swiper自己或子元素时，自动初始化swiper
            observeParents: true, // 修改swiper的父元素时，自动初始化swiper
            // navigation: {  // 分页器
            //     nextEl: '.swiper-button-next',
            //     prevEl: '.swiper-button-prev',
            // },
            // pagination: { // 如果需要前进后退按钮
            //     el: '.swiper-pagination',
            // },
            // scrollbar: { // 如果需要滚动条
            //     el: '.swiper-scrollbar',
            // }
        });
    }

}

html

<div class="swiper-container">
    <divclass="swiper-wrapper">
        <ng-container *ngFor="let item of swiperList">
            <div class="swiper-slide">
            	 <!-- <img [src]="item.imgUrl" alt=""> -->
                <a href="javascript:;" [ngStyle]="{'background': 'url(' + item.imgUrl + ')'}"></a>
            </div>
        </ng-container>
    </div>
    <!-- 如果需要分页器 -->
    <!-- <div class="swiper-pagination"></div> -->
    
    <!-- 如果需要导航按钮 -->
    <!-- <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div> -->
    
    <!-- 如果需要滚动条 -->
    <!-- <div class="swiper-scrollbar"></div> -->
</div>

常见问题

上述是通过以下这种方式来引入swiper的，但是在IE11浏览器中会报错：

import Swiper from 'swiper';

解决方法：

在typings.d.ts文件内 声明全局的Swiper对象。全局的对象一般都放在这里声明，声明后会自动关联到Swiper.js文件的Swiper对象

declare var Swiper: any;

借鉴地址

https://blog.csdn.net/wgp15732622312/article/details/77435703?foxhandler=RssReadRenderProcessHandler