vue-awesome-swiper 轮播图 自定义分页器

 

 

 

首先最重要的是安装对应版本的swiper和vue-awesome-swiper，不然会有坑。

我安装的是"swiper": "^4.5.1","vue-awesome-swiper": "^3.1.3"。

然后引入

import "swiper/dist/css/swiper.css";
import {swiper, swiperSlide} from "vue-awesome-swiper";

//引入组件
components: {
    swiper,
    swiperSlide
  },

分页器配置：

 pagination: {
          el: ".swiper-pagination", //与slot="pagination"处 class 一致
          clickable: true, //轮播按钮支持点击
          bulletClass: "my-bullet",
          bulletActiveClass: "my-bullet-active",
          renderBullet: function (index, className) {
            return (
                '<span class="' + className + '" >' + (index + 1) + "</span>"
            );
          },
        }

自动播放配置：

 autoplay: {
          disableOnInteraction: false,
          delay: 3000
        },

分页器的样式：

<style lang="less">
不要加scoped
</style>

完整代码

 <template>
  <div class="sider_box">
    <swiper
        ref="mySwiper"
        :options="swiperOptions"
        @slideChange="slideChange"
    >
      <swiper-slide>
        <div class="carousel pointerSty">
          <img
              :src="require('../assets/bd_01.png')"
              alt=""
              style="width: 220px; height:110px; object-fit: fill"
          />
        </div>
        <div
            style="padding: 5px; margin-top: 5px; font-size: 16px"
        >
          标题
        </div>
      </swiper-slide>
      <swiper-slide>
        <div class="carousel pointerSty">
          <img
              :src="require('../assets/bd_02.png')"
              alt=""
              style="width: 220px; height:110px; object-fit: fill"
          />
        </div>
        <div
            style="padding: 5px; margin-top: 5px; font-size: 16px"
        >
          标题
        </div>
      </swiper-slide>
      <div slot="pagination" class="swiper-pagination"></div>
    </swiper>
  </div>
</template>

<script>
import "swiper/dist/css/swiper.css";
import {swiper, swiperSlide} from "vue-awesome-swiper";

const c_swiper = document.getElementsByClassName("swiper");
export default {
  name: "Swiper",
  components: {
    swiper,
    swiperSlide
  },
  data() {
    return {
      swiperOptions: {
        loop: true, // 循环滚动
        loopAdditionalSlides: 999,
        autoplay: {
          disableOnInteraction: false,
          delay: 3000
        },
        pagination: {
          el: ".swiper-pagination", //与slot="pagination"处 class 一致
          clickable: true, //轮播按钮支持点击
          bulletClass: "my-bullet",
          bulletActiveClass: "my-bullet-active",
          renderBullet: function (index, className) {
            return (
                '<span class="' + className + '" >' + (index + 1) + "</span>"
            );
          },
        }
      }
    }
  },
  methods: {
    slideChange() {
      const val = this.$refs.mySwiper.swiper.activeIndex;
      this.activeIndex = val - 5;
    },
  }
}
</script>

<style lang="less" scoped>
.sider_box {
  position: relative;
  width: 220px;
  height: 110px;
  margin: 50px;
}

.sider_pointBox {
  display: flex;
  justify-content: flex-end;
  position: relative;
  width: 100%;
  top: -60px;
  z-index: 999;
}

.pointerSty {
  cursor: pointer;
}

.carousel {
  width: 220px;
  height: 110px;
}

</style>

<style lang="less">
.swiper-pagination {
  height: 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
}

.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-container-horizontal > .swiper-pagination-bullets {
  bottom: 43px;
}

.swiper-pagination .my-bullet {
  width: 20px;
  height: 20px;
  color: #fff;
  background: #2c3e50;
  cursor: pointer;
  margin: 0 5px;
}

.swiper-pagination .my-bullet-active {
  display: block;
  width: 20px;
  height: 20px;
  background: red;
  border-radius: 2px;
}

.swiper_tpbd {
  width: 690px;
}

.swiper_spbd {
  width: 690px;
}

.swiper-button-prev, .swiper-button-next {
  position: absolute;
  top: 57%;
  width: 27px;
  height: 25px;
  margin-top: -22px;
  z-index: 10;
  cursor: pointer;
  background-size: 27px 44px;
  background-position: center;
  background-repeat: no-repeat;
}
</style>

最后附上大宝贝：https://github.surmon.me/vue-awesome-swiper/