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

在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的总结swiper5以上只支持vue3,所以需要使用低版本兼容,此处使用vue-awesome-s...
    xurna阅读 2,593评论 0 2
  • Vue不支持IE8以及以下版本。 想要使用Vue的话可以通过直接下载vue.js,放置到项目中写好路径就可以,或者...
    酥枫阅读 3,853评论 0 0
  • 初识Vue2.0 想让Vue工作,就必须创建一个Vue实例,且要传入一个配置对象 vue容器里的代码依然符合htm...
    Zindex阅读 3,627评论 0 0
  • jquery介绍 jQuery是目前使用最广泛的javascript函数库 据统计,全世界排名前100万的网站,有...
    就是这么帅_567e阅读 5,002评论 0 0
  • Vue是一套用于 构建用户界面 的 渐进式 JavaScript框架。渐进式:vue可以自底向上逐层的应用(简单应...
    Spinach阅读 5,711评论 3 7