这几天用vue-awesome-swiper3.1.3实现了一个轮播效果,下边的点点就是不显示。。不管怎么修改在网上百度到要用不同的写法之类,都不好使。

改变思路,没用npm安装包,直接下载swiper.js(4.0版本)和swiper.css文件.

用法如下

<div class="swiper-container" @slideChangeTransitionEnd="getCurSlider">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <div class="partners first"></div>  //图片
    </div>
    <div class="swiper-slide">
      <div class="partners second"></div>
    </div>
    <div class="swiper-slide">
      <div class="partners third"></div>
    </div>
  </div>
  <!-- 如果需要分页器 -->
  <div class="swiper-pagination"></div>

<!-- 如果需要导航按钮 --> 
<div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> 
<!-- 如果需要滚动条 --> 
<div class="swiper-scrollbar"></div>
</div>
data(){
    return{
      mySwiper:null,
    }

}

mounted(){
  this.mySwiper = new Swiper('.swiper-container', {
    notNextTick: true,
    //设定初始化时slide的索引
    initialSlide: 0,
    direction: 'horizontal', // 水平切换选项
    loop: true, // 循环模式选项
    autoplay: {
      disableOnInteraction: false,//手动滑动之后不打断播放
    },
    //滑动速度
    speed: 1000,
    // 如果需要分页器
    observer: true, //监听,当改变swiper的样式(例如隐藏/显示)或者修改swiper的子元素时,自动初始化swiper。
    pagination: {
      el: '.swiper-pagination',
    },
    observeParents:true//修改swiper的父元素时,自动初始化swiper  如果修改外层样式,这个一定要加!!
  })
  }
},
.swiper-container {
  padding: 0 0 20px 0;
}
.swiper-pagination {
  margin-left: -12px;
}
.swiper-container-horizontal > .swiper-pagination-bullets {
  bottom: 0px;
}
Logo

前往低代码交流专区

更多推荐