# swiper

**Repository Path**: jsopy/swiper

## Basic Information

- **Project Name**: swiper
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-12-31
- **Last Updated**: 2022-02-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 快速开始

本文档是基于 Vue3.0 + Swiper 书写而成,如果后续有修改的。请自行参考文档

# 概述

Swiper 只要是轮播图绝对最好用的工具.本章节使用 Swiper7+Vue3.0 来实例

[文档点击](https://www.swiper.com.cn/api/index.html)

# 流程说明

## (1) 安装包

```bash

cnpm i swiper@7 -S

```

## (2) 入门 demo

- 使用的时候,必须要在使用的组件里面引入

- 横向滚动,默认

```html
<template>
  <button @click="gotoslider">滚动到指定的选项</button>

  <div class="swiper">
    <div class="swiper-wrapper">
      <div
        class="swiper-slide"
        v-for="(item, index) in datasource"
        :key="index"
      >
        <img :src="item.picurl" style="width: 100%" />
      </div>
    </div>
    <div class="swiper-pagination"></div>

    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>

  <!-- 	 <slot name="header" :color="color"></slot> -->
</template>

<script>
  import { onMounted, reactive, ref, toRefs } from 'vue';

  import Swiper, { Navigation, Pagination, Autoplay } from 'swiper';

  import 'swiper/swiper-bundle.min.css';

  export default {
    props: ['banner'],

    setup() {
      const data = reactive({
        color: 'red',
        datasource: [
          {
            id: 1,
            picurl: 'https://vuejs.org/images/logo.svg',
          },
          {
            id: 2,
            picurl: 'https://vuejs.org/images/logo.svg',
          },
          {
            id: 3,
            picurl: 'https://vuejs.org/images/logo.svg',
          },
        ],
        swiperContent: null,
        mySwiper: () => {
          let s = new Swiper('.swiper', {
            // pass modules here
            modules: [Navigation, Pagination, Autoplay],
            /* slidesPerView: 3,
           slidesPerGroup: 3, */
            autoplay: {
              delay: 2000, //1秒切换一次
              disableOnInteraction: false,
              pauseOnMouseEnter: true,
            },
            //循环
            loop: true,
            //左右箭头
            navigation: {
              nextEl: '.swiper-button-next',
              prevEl: '.swiper-button-prev',
            },
            //底部分页
            pagination: {
              el: '.swiper-pagination',
              clickable: true,
            },
            on: {
              //获取swiper
              init: function (swiper) {
                console.log(swiper);
                data.swiperContent = swiper;
                // //或者swiper.activeIndex，swiper与this都可指代当前swiper实例
                console.log('当前的slide序号是' + this.realIndex);
                // //在初始化时触发一次transitionEnd事件，需要先设置transitionEnd
                this.emit('transitionEnd');
              },
              //改变
              slideChange: function () {
                console.log(this.realIndex);
              },
            },
          });
        },
        //滚动到指定的选项
        gotoslider: () => {
          //三个参数 index speed callback
          data.swiperContent.slideTo(2, 300, data.done());
        },
        //回调函数
        done: () => {
          console.log('完成了');
        },
      });
      onMounted(() => {
        console.log('挂在了');
        data.mySwiper();
      });
      return {
        ...toRefs(data),
      };
    },
  };
</script>

<style lang="less" scoped>
  .swiper {
    width: 800px;
    height: 600px;
    /deep/ .swiper-pagination-bullet {
      width: 30px;
      height: 30px;
    }
    .swiper-slide {
      width: 100%;
      height: 500px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
</style>
```

## (3) 解释说明

- 需要什么模块 必须提前引入

- 比如 EffectFlip,Pagination 等等模块

```javascript
import Swiper, { Navigation, Pagination, Autoplay } from 'swiper';
```

- 然后再属性里面 modules 里面引入模块

```javascript

modules: [Navigation, Pagination, Autoplay, EffectFlip],

```

- 接着属性里面加值

```javascript

effect: 'flip',

```