JavaScript响应式卡片、图片等元素分页浏览控制器,支持多种参数配置

    这是一款纯JavaScript实现的卡片分页组件,基于DOM操作和事件监听技术实现,支持对任意数量元素进行分页浏览控制,并且提供了二十多项灵活的配置选项,适用于内容展示和相册浏览场景。

支持的配置项:


选项名类型说明默认值
containerSelector字符串项目容器的选择器。'.items'
itemSelector字符串单个项目元素的选择器。'.item'
navigationSelector字符串分页导航容器的选择器。'.page_navigation'
itemsPerPage整数每页显示的项目数量。10
pageLinksToDisplay整数一次显示的页码链接数量。超出部分会用“...”替代。10
startPage整数初始显示的页码(从0开始)。0
wrapAround布尔值是否允许翻到末页后回到首页,或从首页翻到末页。false
navLabelFirst字符串“首页”按钮的文字标签。'First'
navLabelPrev字符串“上一页”按钮的文字标签。'Prev'
navLabelNext字符串“下一页”按钮的文字标签。'Next'
navLabelLast字符串“末页”按钮的文字标签。'Last'
navAriaLabelFirst字符串“首页”按钮的无障碍(ARIA)标签。'First'
navAriaLabelPrev字符串“上一页”按钮的无障碍(ARIA)标签。'Prev'
navAriaLabelNext字符串“下一页”按钮的无障碍(ARIA)标签。'Next'
navAriaLabelLast字符串“末页”按钮的无障碍(ARIA)标签。'Last'
navOrder数组控件显示顺序,'num'代表页码数字。["first", "prev", "num", "next", "last"]
showFirstLast布尔值是否显示“首页”和“末页”按钮。false
showPrevNext布尔值是否显示“上一页”和“下一页”按钮。true
hideOnSmall布尔值当总项目数少于每页项目数时,是否隐藏分页控件。false
defaultClass字符串应用于所有控件元素的公共 CSS 类名。''
activeClass字符串应用于当前激活页码链接的 CSS 类名。'active'
disabledClass字符串应用于禁用状态控件的 CSS 类名。'disabled'
onInit函数初始化完成时触发的回调函数。false
onPageDisplayed函数每次分页切换后触发的回调函数。false

基于purePajinate开源组件定制而成


模板目录结构如下:
  • 如非特殊说明,本站对本文提供的代码或者素材不拥有任何权利,其版权归原著者拥有。
  • 以上提供的代码或者素材均为作者提供和网友推荐收集整理而来,仅供学习和研究使用。
  • 如有侵犯你版权的,请来信(邮箱:tongzhewangluo@163.com)指出,核实后,本站将立即改正。
  • 如有链接无法下载、失效或广告,请通过网站提供的微信联系作者!
  • 以上资源售价只是赞助,不代表代码或者素材本身价格。收取费用仅维持本站的服务器开销!
  • 所有代码素材效果均为演示打包,最终效果请参考演示效果,本站不提供任何技术支持和服务。
  • 代码素材均为虚拟物品,演示和描述无错的情况下,无法进行退换服务。