vue-awesome-swiper 使用

濮阳茂材
2023-12-01

安装 vue swiper
npm install swiper@6.7.1 --save
npm install vue-awesome-swiper --save

<div class="swiper-container filmswiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img src="" alt=""/>
        </div>
        <div class="swiper-slide">
          <img src="" alt=""/>
        </div>
        <div class="swiper-slide">
          <img src="" alt=""/>
        </div>
      </div>
    </div>

在vue 引入文件中 swiper

import { Swiper, SwiperSlide } from "swiper";
import "swiper/swiper-bundle.css";
 
export default {
   components: {
     Swiper,
     SwiperSlide,
  },
mounted(){
  const swiper = new Swiper(".filmswiper",{
    loop: true,
    autoplay: {
       delay: 3000,
       disableOnInteraction: false,
     },
  })
}
}
 类似资料: