vue Swiper 横向轮播

m0_59985666

于 2024-08-09 16:59:39 发布

阅读量206

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_59985666/article/details/141065496

版权

页面：

<div class="swiper-container swiper3">
  <div class="swiper-wrapper">
    <div class="swiper-slide" v-for="(item, index) in newsTextLists" :key="index">
      <a v-if="item.url && item.url !== ''" target="_blank" :href="item.url">
        <div class="homeSec02Lwrap">
          <el-image
            style="width: 100%; height: 100%"
            :src="item.thumb1"
             fit="cover"
            class="homeSec02Limg">
          </el-image>
        </div>
       </a>
     </div>
   </div>
  </div>
  <div class="swiper-button-prev swiper-button-white swiper_btn"></div>  // 上一张按钮
  <div class="swiper-button-next swiper-button-white swiper_btn"></div>  // 下一张按钮
</div>

mounted(){
  this.swiper3start()
}

方法：

methods: {  
  swiper3start(){
    this.$nextTick(() => {
      new Swiper('.swiper3', {
        loop: true,
        loopAdditionalSlides : 1,
        autoplay: 3000,
        speed: 1000,
        observer: true,
        observeParents: true,
        observeSlideChildren: true,
        autoplayDisableOnInteraction: false,
        prevButton:'.swiper-button-prev',
        nextButton:'.swiper-button-next',
      })
    });
  }
}

样式：

.swiper3 {
  height: 80px;
  width:100%;
}
/* 按钮样式 */
.swiper3 .swiper-button-next,
.swiper3 .swiper-button-prev {
  margin: 0 10px;
  width:34px;
  height: 56px;
  top: 185px;
  background-color: rgba(0, 0, 0, 0.2);
  background-size: 10px;
}

效果：