vue3中使用swiper自定义pagination

最新推荐文章于 2025-02-18 15:28:48 发布

发呆的小蔡°

最新推荐文章于 2025-02-18 15:28:48 发布

阅读量3.3k

点赞数

分类专栏： Vue3.2 Swiper 文章标签： vue.js 前端 swiper pagination

本文链接：https://blog.youkuaiyun.com/Shivy_/article/details/129838509

版权

Vue3.2 同时被 2 个专栏收录

16 篇文章

订阅专栏

Swiper

5 篇文章

订阅专栏

文章介绍了如何在Vue3应用中利用Swiper组件创建轮播图，并详细阐述了如何自定义分页器，特别是将其配置为时间轴样式。通过设置Swiper的pagination选项，利用`renderCustom`函数动态生成包含特定年份的时间节点，实现了分页器的个性化设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

介绍

在 vue3 中使用 swiper, 实现轮播图的效果；默认的 分页器是以小圆点的形式显示，但是很多时候会用到自定义分页器，这就需要修改内置的参数进行配置；
例如，如下所示，需要通过 swiper实现时间轴，然后分页器就需要自定义成具体的时间；
在这里插入图片描述

代码

 import { Swiper, SwiperSlide } from 'swiper/vue'
 import 'swiper/css/pagination' 
 import {Pagination} from 'swiper'
  const pagination = ref({
    el: ".swiper-pagination",
    clickable: true,
    type: 'custom',
      renderCustom:function(swiper,current,total){
      var paginationHtml = '';
      var text = ['2014','2015','2016','2017','2018','2019'];
      for(var i=1;i<=total;i++){
        if(i==current){
          paginationHtml+=` <span class='pagination_text swiper-pagination-bullet swiper-pagination-bullet-active'>${text[i-1]}</span>`
        }else{
          paginationHtml+=`<span class='pagination_text swiper-pagination-bullet'>${text[i-1]}</span>`
        }
      };
      return paginationHtml
    }
  })