vue3中使用swiper轮播显示多张图片

使用swiper轮播显示多张图片

1. Vue3中可以使用ES模块引入方式：

// 安装swiper包
npm install swiper

2. 项目中采用的局部引入

import { Swiper, SwiperSlide } from "swiper/vue/swiper-vue.js";
import "swiper/swiper-bundle.min.css";//导入核心 Swiper 样式
import { Navigation } from "swiper";
export default {
    components: {
    Swiper,
    SwiperSlide,
  },
   setup() {
    const data = reactive({
    modules: [Navigation],
    })
  }

3. template的写法

  <swiper class="modellist_container" 
                         :navigation="true"  
                         :modules="modules" 
                         :slides-per-view="4" 
                         :slides-per-group="4" 
                         :scrollbar="{ draggable: true }" 
                         :grid="{ rows:1,fill:'column' }">
         <swiper-slide v-for="item,key in 8" :key="key">
             <div style="width:200px;height:100px;background:blue"></div>
         </swiper-slide>
             </swiper-slide>
  </swiper>

属性说明：

  :navigation="true"  // 显示 前进后退按钮
  :modules="modules" 
  :slides-per-view="4" //同时显示了4个滑块
  :slides-per-group="4" 
  :scrollbar="{ draggable: true }" //可以进行手动滚动
  :grid="{ rows:1,fill:'column' }"//纵向一行显示

4.style样式中

.modellist_container {
  width: 100%;
  height: 100%;
  }

效果图：