ng-case/src/modules/study/case-js-module/pages/slider/README.md

Swiper的具体使用

安装Swiper依赖

• 参考:https://swiperjs.com/element

注意:请在项目根目录,和package.json同级运行 右键package.json 集成终端打开(integration terminal)

ls
npm install swiper -S

配置css样式文件

• 创建目录src/assets/swiper/
• 打开node_modules/swiper

• 复制swiper.min.css至src/assets/swiper/下

• /src/index.html的head区域写入

  <!-- Swiper轮播图样式 -->
  <link rel="stylesheet" href="assets/swiper/swiper.min.css">
  

用Swiper类进行创建

• html添加轮播区域

  
  <!-- Swiper轮播图 手动创建 -->
  <!-- Slider main container -->
  <button (click)="slide1?.slideNext()">next</button>
  <div #slide1Comp class="swiper">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
  </div>
  <!-- If we need pagination -->
  <div class="swiper-pagination"></div>
  
  <!-- If we need navigation buttons -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
  
  <!-- If we need scrollbar -->
  <div class="swiper-scrollbar"></div>
  </div>
  

• 使用Swiper类创建

  import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
  
  import Swiper from 'swiper';
  
  @Component({
  selector: 'app-slider',
  templateUrl: './slider.page.html',
  styleUrls: ['./slider.page.scss'],
  })
  export class SliderPage implements OnInit {
  @ViewChild("slide1Comp") slide1Comp:ElementRef |undefined
  constructor() { }
  
  ngOnInit() {
  // 延迟500毫秒加载
  setTimeout(() => {
    this.initSwiper();
  }, 500);
  }
  
  // 初始化轮播图
  slide1:Swiper|undefined
  initSwiper(){
  console.log(this.slide1Comp)
  this.slide1 = new Swiper(this.slide1Comp?.nativeElement, {
    loop:true,
    autoplay:{
      delay:500,
    },
    mousewheel: {
      forceToAxis: true,
    },
    pagination:{
      el:".swiper-pagination",
      clickable:true
    }
  });
  }
  }