美文网首页
如何解决swiper.js的freeMode配置不生效

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

作者: 用IE的都是狗 | 来源:发表于2022-12-07 14:43 被阅读0次

在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>

相关文章

网友评论

      本文标题:如何解决swiper.js的freeMode配置不生效

      本文链接:https://www.haomeiwen.com/subject/mxnwfdtx.html