阿坝州网站建设公司

Swiper怎么在Angular6中使用

Swiper怎么在Angular6中使用？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。

成都创新互联公司长期为上千多家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为治多企业提供专业的网站设计、成都网站制作，治多网站改版等技术服务。拥有十年丰富建站经验和众多成功案例,为您定制开发。

项目使用的Angular版本是V6.0.3

Swiper怎么在Angular6中使用

安装Swiper

npm install swiper --save

或者

yarn add swiper --save

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

Swiper怎么在Angular6中使用

angular.json

安装模组定义档

npm install @types/swiper --save

或者

yarn add @types/swiper --save

配置tsconfig文件

Swiper怎么在Angular6中使用

tsconfig.json

Swiper怎么在Angular6中使用

tsconfig.app.json

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

test.component.html


  
    
      
    
  
     
     
  

test.component.ts

import {
  AfterViewInit,
  Component,
  OnInit
} from '@angular/core';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html'
})
export class TestComponent implements 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() {}

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

看完上述内容，你们掌握Swiper怎么在Angular6中使用的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注创新互联行业资讯频道，感谢各位的阅读！


文章名称：Swiper怎么在Angular6中使用
文章来源：http://azwzsj.com/article/popjhp.html

其他资讯