Vue使用Swiper插件

Vue使用Swiper插件

这里直接封装，方便后边使用

Swiper.vue

<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <slot></slot>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
    
    <!-- 如果需要导航按钮 -->
    <template v-if="!btnCustom">
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
    </template>
    <template v-else>
      <div class="custom-button button-prev" v-if="$slots['button-prev']">
        <slot name="button-prev"></slot>
      </div>
      <div class="custom-button button-next" v-if="$slots['button-next']">
        <slot name="button-next"></slot>
      </div>
    </template>
    
    <!-- 如果需要滚动条 -->
    <!-- <div class="swiper-scrollbar"></div> -->
  </div>
</template>

<script>
import Swiper from 'swiper/bundle';
import "swiper/swiper-bundle.min.css";

export default {
  name: 'Swiper',
  props: {
    // 上一张 / 下一张 按钮是否自定义，值为false,自定义无效
    btnCustom: {
      type: Boolean,
      default: false
    }
  },
  
  mounted() {
    let navigation = {
      prevEl: this.btnCustom ? '.button-prev' : '.swiper-button-prev',
      nextEl: this.btnCustom ? '.button-next' : '.swiper-button-next',
    };
    new Swiper ('.swiper-container', {
      loop: true,
      loopAdditionalSlides: 1,
      autoplay: true,
      pagination: {
        el: '.swiper-pagination',
        clickable: true
      },
      navigation
    })
  },
}
</script>

<style>
.swiper-pagination-bullet {
  /* 这里设置分页器未激活的颜色 */
  background: black;
}

.swiper-pagination-bullet-active {
  /* 这里设置分页器激活的颜色 */
  background: red;
}

/* 以下为自定义btn按钮的样式 */
.custom-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  cursor: pointer;
}

.button-prev {
  left: 0;
}

.button-next {
  right: 0;
}
</style>

SwiperSlide.vue

<template v-slot>
  <div class="swiper-slide">
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'SwiperSlide'
}
</script>

<style>

</style>

使用

<template>
  <div class="wrap">
    <Swiper btnCustom>
      <SwiperSlide>
        <div class="item">Slide 1</div>
      </SwiperSlide>
      <SwiperSlide>
        <div class="item">Slide 2</div>
      </SwiperSlide>
      <SwiperSlide>
        <div class="item">Slide 3</div>
      </SwiperSlide>
      <SwiperSlide>
        <div class="item">Slide 4</div>
      </SwiperSlide>

      <template #button-prev>
        <div>上一张</div>
      </template>
      <template #button-next>
        <div>下一张</div>
      </template>
    </Swiper>
  </div>
</template>

<script>
import Swiper from "../components/Swiper";
import SwiperSlide from "../components/SwiperSlide";

export default {
  components: {
    Swiper,
    SwiperSlide
  }
}
</script>

<style scoped>
.wrap {
  /* 父容器，设置 轮播图的宽度 */
  width: 1000px;
  margin: 50px auto;
}

.item {
  height: 500px;
  background: skyblue;
  font-size: 50px;
  line-height: 500px;
  text-align: center;
}
</style>

效果