nuxtjs中使用vue-awesome-swiper自定义分页器

最新推荐文章于 2024-05-16 10:17:05 发布

行云流水626

最新推荐文章于 2024-05-16 10:17:05 发布

阅读量448

点赞数

文章标签： vue.js 前端 javascript 前端框架

本文链接：https://blog.csdn.net/Lsir1998/article/details/132323353

版权

1、下载安装官方文档：vue-awesome-swiper - npm

npm i vue-awesome-swiper@4.1.1

2、在plugins文件夹新建swiper.js 文件名可自定义

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)

3、在nuxt.comfig.js中配置引入

css: [
    'swiper/css/swiper.min.css',
 ],
  plugins: [
    {src:'@/plugins/swiper',ssr: false},
  ],

4、页面组件中引入使用

<template>
  <div>
    <div id="swiperWrapper">
        <div v-swiper:mySwiper="swiperOption" ref="mySwiper" class="swiper-container" @mouseenter="on_enter" @mouseleave="on_leave">
          <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="(item,index) in list1" :key="index">
              <img style="width: 100%;height: 100%;" src="https://pigmcsdotcom.pigcms.com/kuaijing/zhsq/images/banner1.png">
            </div>
          </div>
          <div class="swiper-pagination" style="display: flex;align-items: center;justify-content: center;position: absolute;bottom:10rem;left: 0;width: 100%;"></div>
        </div>
      </div>
  </div>
</template>

<script>
export default{
    data(){
        return{
            list1:[1,2],
      swiperOption:{
        loop: true,
        autoplay: {
          disableOnInteraction: false,
          delay: 2000 //3秒切换一次
        },
        slidesPerView: 'auto', //slide容器能够同时显示的slides数量
        pagination: {
          el: '.swiper-pagination',
          type: 'custom', // 自定义轮播图bullet指示点
          renderCustom: function (swiper, current, total) {
            const activeColor = '#fff'
            const normalColor = '#618cf5'
            let color = ''
            let paginationStyle = ''
            let html = ''
            let width = '9rem'
            for (let i = 1; i <= total; i++) {
              if (i === current) {
                color = activeColor
                width = '30rem'
              } else {
                color = normalColor
                width = '9rem'
              }
              if (i === total) {
                paginationStyle = `background:${color};width: ${width}; height: 9rem;border-radius:9rem;opacity:1`
              } else {
                paginationStyle = `background:${color};margin-right: 8rem; width: ${width}; height: 9rem;border-radius:9rem;opacity:1`
              }
              html += `<span class="swiper-pagination-bullet" style="${paginationStyle}"></span>`
            }
            return html
          }
        }
      },
        }
    },
 computed: {
    swiper() {
      return this.$refs.mySwiper.swiper;
    },
  },
methods:{
     on_enter () { //鼠标移入停止轮播
      this.swiper.autoplay.stop()
    },
    on_leave () {//鼠标移出继续轮播
      this.swiper.autoplay.start()
    },
}
}
</script>