vue3 swiper 中间大图 两边显示部分

swiper 官网  ====》 swiper 安装步骤

效果图：

 

src/components下 建一个 swiper.js 文件

import { createApp } from 'vue'
const app = createApp()
import { Swiper, SwiperSlide } from 'swiper/vue'

//按需加载模块  此处仅需分页及指示点
import SwiperCore, { Navigation,Pagination  } from 'swiper'
import 'swiper/swiper-bundle.css'
SwiperCore.use([Navigation,Pagination ])
const plugins = [Swiper, SwiperSlide]

const swiper = {
  install: function (app) {
    plugins.forEach(item => {
      app.component(item.name, item)
    })
  }
}

export default swiper

mai.js 引入

import swiper from './components/swiper.js'



app.use(swiper).mount('#app')

页面：

样式根据需要调整，这个是视频的轮播 所以是video