swiper轮播图 swiper-pagination 小圆点不显示，以及切换图片无效的问题

最新推荐文章于 2024-07-20 16:46:53 发布

Kudou-Shinichi

最新推荐文章于 2024-07-20 16:46:53 发布

阅读量4.3k

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/Xichubawang_/article/details/123096141

版权

@[页面会报错]Property or method “swiperOption” is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

 swiperOptions:{
        pagination: {
          el: ".swiper-pagination",
          clickable: true, // 允许点击小圆点跳转
        },
        autoplay: {
          delay: 3000,
          disableOnInteraction: false, // 手动切换之后继续自动轮播
        },
        loop: true,
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      },

这里的swiperOptions不能是复数，再多也只能是swiperOption，修改之后就可以了

swiperOption:{
        pagination: {
          el: ".swiper-pagination",
          clickable: true, // 允许点击小圆点跳转
        },
        autoplay: {
          delay: 3000,
          disableOnInteraction: false, // 手动切换之后继续自动轮播
        },
        loop: true,
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      },