vue-awesome-swiper 配置（分页不显示\鼠标无效\渐变无效等）

Z时代
2024-01-10
分类：综合

vue

代码片断

import { Swiper, EffectFade, Mousewheel, Pagination } from 'swiper'
import { directive } from 'vue-awesome-swiper'
import 'swiper/swiper-bundle.css'
Swiper.use([EffectFade, Mousewheel, Pagination])
export default {
  components: { MainFooter, LoginForm },
  directives: {
    swiper: directive,
  },
  data() {
    return {
      swiperOption: {
        effect: 'fade',
        direction: 'vertical',
        slidesPerView: 1,
        mousewheel: true,
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
        },
      },
    }
  }