中文网swiper5最新版本用法

1.安装

npm install vue-awesome-swiper --save-dev

2.全部引入

//main.js

import VueAwesomeSwiper from 'vue-awesome-swiper'

// import style
import 'swiper/css/swiper.css'

Vue.use(VueAwesomeSwiper, /* { default options with global component } */)

3.vue文件使用和两个swiper的嵌套，一个横向嵌套一个纵向swiper

<template>
    <div class="swiper">
      <swiper :options="swiperOption" class="swiper-container-par">
            <swiper-slide class="swiper-slide" v-for="(index) in item" :key="index">
              <swiper :options="swiperOption1" v-if="index == 4" style="background: green" class="swiper-container-child">
                <swiper-slide class="swiper-slide" v-for="(j) in 4" :key="j">
                  {{j}}
                </swiper-slide>
                <!-- 分页器 -->
                <div class="swiper-pagination"  slot="pagination"></div>   
              </swiper>
              <div v-else>{{index}}</div>
            </swiper-slide>
            <!-- 分页器 -->
            <div class="swiper-pagination"  slot="pagination"></div>   
      </swiper>
      <!-- 左右箭头 --> 
      <!-- <div class="swiper-button-prev" slot="button-prev"></div> 
      <div class="swiper-button-next" slot="button-next"></div>  -->
      <button @click="del">-1</button>
      <button @click="sum">+1</button>
    </div>
</template>

<script>
    export default {
        data(){
            return {
                swiperOption:{
                    loop: true,
                    pagination: {
                      el: '.swiper-pagination',
                    }
                },
                swiperOption1:{
                    //开启循环模式
                    loop: true,
                    direction : 'vertical',
                },
                item: 8
            }
        },
        methods: {
          del () {
            this.item--;
          },
          sum () {
            this.item++;
          },
        }
    }
</script>

<style scoped lang="less">
.swiper {
  position: relative;
  .swiper-container-par {
    width: 80%;
    height: 300px;
    background: red;
    .swiper-container-child {
      height: 100%;
    }
  }
  .swiper-button-prev, .swiper-button-next {
    outline: none;
    top: calc(50%)
  }
}
</style>