Vue集成Swiper轮播

• 前言
• 下载相关依赖
• 基本代码
• 相关资料网站

前言

这里记录一下Vue2.X引入Swiper案例（注意这里是Vue2.x，Vue3直接在Swiper官网上根据教程安装使用）

下载相关依赖

依次下载Vue-awesome-swiper、Swiper

npm install --save vue-awesome-swiper

npm install --save swiper@5.x

版本信息

基本代码

HTML

    <swiper ref="mySwiper" :options="swiperOptions">
      <swiper-slide>
        <div style="border: 1px solid red;width:300px;height:500px">1</div>
      </swiper-slide>
      <swiper-slide>
      <div style="border: 1px solid red;width:300px;height:500px">2</div>
      </swiper-slide>
      <swiper-slide>
      <div style="border: 1px solid red;width:300px;height:500px">3</div>
      </swiper-slide>
      <swiper-slide>
      <div style="border: 1px solid red;width:300px;height:500px">4</div>
      </swiper-slide>
      <swiper-slide>
      <div style="border: 1px solid red;width:300px;height:500px">5</div>
      </swiper-slide>
      <swiper-slide>
      <div style="border: 1px solid red;width:300px;height:500px">6</div>
      </swiper-slide>
      <swiper-slide>
      <div style="border: 1px solid red;width:300px;height:500px">7</div>
      </swiper-slide>
      <swiper-slide>
      <div style="border: 1px solid red;width:300px;height:500px">8</div>
      </swiper-slide>
      <swiper-slide>
      <div style="border: 1px solid red;width:300px;height:500px">9</div>
      </swiper-slide>
      <swiper-slide>
      <div style="border: 1px solid red;width:300px;height:500px">10</div>
      </swiper-slide>
      <swiper-slide>
      <div style="border: 1px solid red;width:300px;height:500px">11</div>
      </swiper-slide>
      <!-- 分页 -->
      <div class="swiper-pagination" slot="pagination"></div>
      <!-- 切换按钮 -->
      <div class="swiper-button-next" slot="button-next"></div>
      <div class="swiper-button-prev" slot="button-prev"></div>
    </swiper>

JS

import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
// import style (>= Swiper 6.x)
// import 'swiper/swiper-bundle.css'
// import style (<= Swiper 5.x)
import 'swiper/css/swiper.css'

export default {
  name: 'swiper-test',
  components: {
    Swiper,
    SwiperSlide
  },
  data () {
    return {
      // swiper配置项
      swiperOptions: {
        // 显示个数
        slidesPerView: 6,
        // 切换个数
        slidesPerGroup: 1,
        // 分页
        pagination: {
          el: '.swiper-pagination'
        },
        // 切换按钮
        navigation: {
          // 下一个
          nextEl: '.swiper-button-next',
          // 上一个
          prevEl: '.swiper-button-prev'
        }
      }
    }
  }
}

效果

具体其他详细配置参考资料网站

相关资料网站

Swiper：https://www.swiper.com.cn/
Swiper中文配置：https://www.swiper.com.cn/api/index.html
Vue-awesome-swiper：https://github.com/surmon-china/vue-awesome-swiper
Vue3引入Swiper: https://swiperjs.com/vue