如何解决swiper.js的freeMode配置不生效

2022-12-07
1分钟阅读时长

在vue3项目中通过npm的方式使用swiper 8,设置freeMode之后发现不生效。 原因为FreeMode被分为单独模块了,需要引入模块才生效。

注意引入的 FreeMode 大小写

// "swiper": "^8.4.5"
import { FreeMode } from 'swiper'
import { Swiper, SwiperSlide } from 'swiper/vue'
import 'swiper/css'

const swiperOption = {
  freeMode: true,
  modules: [FreeMode],
}

然后通过 v-bind 绑定多个属性

<Swiper v-bind="swiperOption">
  <SwiperSlide>...</SwiperSlide>
  <SwiperSlide>...</SwiperSlide>
  <SwiperSlide>...</SwiperSlide>
</Swiper>
Avatar

陈文

热爱生活,喜欢新鲜的事物,希望用自己的能力让世界变得更好,愿望是世界和平。