Vue3+swiper实现平铺轮播图

最新推荐文章于 2024-07-22 15:42:11 发布

一个菜鸟的笔记

最新推荐文章于 2024-07-22 15:42:11 发布

阅读量345

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_45697138/article/details/139355688

版权

        <Swiper
          ref="swiperRef"
          :modules="modules"
          :loop="true"
          :loopAdditionalSlides="3"
          :centeredSlides="true"
          :initialSlide="1"
          :slidesPerView="3"
          :spaceBetween="10"
          :updateOnWindowResize="true"
          :watchSlidesProgress="true"
          :navigation="navigation"
          :pagination="{ clickable: true }"
          :autoplay="{
            delay: 3000,
            disableOnInteraction: false,
          }"
          :speed="1000"
          :effect="'fade'"
          :grabCursor="true"
          class="swiper-container"
          @slideChange="onSlideChange"
        >
          <SwiperSlide class="swiper-slide">
            <img src="@/assets/images/contentus/zl1.png" alt="" />
          </SwiperSlide>
          <SwiperSlide class="swiper-slide">
            <img src="@/assets/images/contentus/zl2.png" alt="" />
          </SwiperSlide>
          <SwiperSlide class="swiper-slide">
            <img src="@/assets/images/contentus/zl3.png" alt="" />
          </SwiperSlide>
          <SwiperSlide class="swiper-slide">
            <img src="@/assets/images/contentus/zl4.png" alt="" />
          </SwiperSlide>
          <div
            class="swiper-button-prev"
            @click.stop="prevEl(item, index)"
          ></div>
          <div class="swiper-button-next" @click.stop="nextEl"></div>
        </Swiper>


/* 初始状态下隐藏切换按钮 */
.swiper-button-next,
.swiper-button-prev {
  opacity: 0;
  transition: opacity 0.3s ease;
}
:deep(.swiper-pagination) {
  opacity: 0;
  transition: opacity 0.3s ease;
}
/* 当鼠标悬停在swiper容器上时显示切换按钮 */
.swiper-container:hover .swiper-button-next,
.swiper-container:hover .swiper-button-prev {
  // background-image: url('@/assets/images/architect/icon_3.png');
  opacity: 1;
}

:deep(.swiper-container:hover .swiper-pagination) {
  opacity: 1;
}

.swiper {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  box-sizing: border-box;
}
.swiper-wraper {
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  box-sizing: content-box;
}
.swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  img {
    width: 55vh;
  }
}
.swiper-slide-imgbox {
  opacity: 1;
  box-sizing: border-box;
}```