网站建设

轮播组件vue-awesome-swiper定制

vue-awesome-swiper轮播组件可以实现基本的轮播效果

demo地址:https://github.surmon.me/vue-awesome-swiper/

api地址:https://www.swiper.com.cn/api/

但是有时候需要定制,如下面的分页切换有时候需要弄成缩略图,发现将pagination的type设置为: custom有时候点击无法生效,需要再指定renderBullet函数来进行切换的定制,如下:

swiperOption: {
        direction: "vertical",
        paginationClickable: true,
        pagination: {
          el: ".swiper-pagination",
          bulletClass : 'my-bullet',//需设置.my-bullet样式
          //   type:'custom',
          renderBullet: function (indexclassName) {
            return '<img class="' + className + '" style="width:20px;height:20px;display:block;margin-bottom:5px;" src="' +  that.imgVOList[index] + '" />'
          },
          clickable: true
        }
      }
对应的html:

<swiper class="swiper" :options="swiperOptionref="swiper">
          <swiper-slide v-for="(img,indexin imgVOList" :key="index">
            <img :src="img" />
          </swiper-slide>

          <div class="swiper-pagination" slot="pagination">
           
          </div>
        </swiper>

上一个:金兆顺项目管理网站系统上线没有下一个

联系我们

CONTACT US

联系人:羊先生

手机:

微信:

邮箱:1056396855@qq.com

地址: 广东省深圳市南山区科技园金融基地

在线客服分享转发扫描二维码返回顶部
用手机扫描二维码关闭
二维码