标签：index pagination vue 自定义 awesome height width 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/

标签：index,pagination,vue,自定义,awesome,height,width,swiper
来源： https://www.cnblogs.com/orzzt/p/15775075.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。