# Swiper的具体使用


# 安装Swiper依赖
- 参考:https://swiperjs.com/element

> 注意:请在项目根目录,和package.json同级运行
> 右键package.json 集成终端打开(integration terminal)
``` bash
ls
npm install swiper -S
```

# 配置css样式文件
- 创建目录src/assets/swiper/
- 打开node_modules/swiper
- 复制swiper.min.css至src/assets/swiper/下

- /src/index.html的head区域写入
``` html
<!-- Swiper轮播图样式 -->
<link rel="stylesheet" href="assets/swiper/swiper.min.css">
```

# 用Swiper类进行创建
- html添加轮播区域
``` 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类创建
``` ts
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
      }
    });
  }
}
```