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

2022-12-07  本文已影响0人  用IE的都是狗

在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>
上一篇 下一篇

猜你喜欢

热点阅读