如何将刷卡器中的分页项目符号更改为文本?

Posted

技术标签:

【中文标题】如何将刷卡器中的分页项目符号更改为文本?【英文标题】:how to change the pagination bullet in a swiper to text? 【发布时间】:2016-10-16 11:19:48 【问题描述】:

在我的项目中:http://moransh4.github.io/Luca/

我需要将最后一节的 swiper-pagination-bullet 更改为:

“活动”变为绿色。

我读到(来自:http://idangero.us/swiper/api/)我可以用这个来定制:

 paginationBulletRender: function (index, className) 
        return '<span class="' + className + '">' + (index + 1) + '</span>';
    

对不起,我迷路了,

怎么做?

【问题讨论】:

【参考方案1】:

您应该改用paginationCustomRender 来创建自定义设计。在每个div 中定义您的names

var mySwiper2 = new Swiper('.swiper-container.shoes', 
  // Optional parameters
  pagination: '.pag-shoes',
  paginationClickable: true,
  nextButton: '.swiper-button-next',
  prevButton: '.swiper-button-prev',
  spaceBetween: 30,
  loop: true,
  paginationType: "custom",
  paginationCustomRender: function(swiper, current, total) 
    var names = [];
    $(".swiper-wrapper .swiper-slide").each(function(i) 
      names.push($(this).data("name"));
    );
    var text = "<span style='background-color:black;padding:20px;'>";
    for (let i = 1; i <= total; i++) 
      if (current == i) 
        text += "<span style='border-top:1px solid green;margin-right:4px;color:green;padding:10px;'>" + names[i] + "</span>";
       else 
        text += "<span style='border-top:1px solid white;margin-right:4px;color:white;padding:10px;'>" + names[i] + "</span>";
      

    
    text += "</span>";
    return text;
  

);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://moransh4.github.io/Luca/css/swiper.min.css">
<script src="http://moransh4.github.io/Luca/js/swiper.jquery.min.js"></script>
<div class="swiper-container shoes">
  <div class="swiper-wrapper">
    <div class="swiper-slide" data-name="LEVEL1">
      <img src="http://placehold.it/600x300" >
    </div>
    <div class="swiper-slide" data-name="DESIGN">
      <img src="http://placehold.it/600x300" >
    </div>
    <div class="swiper-slide" data-name="PERFORMANCE">
      <img src="http://placehold.it/600x300" >
    </div>
    <div class="swiper-slide" data-name="DESIGN">
      <img src="http://placehold.it/600x300" >
    </div>
  </div>
  <!-- Add Pagination -->
  <div class="swiper-pagination pag-shoes"></div>
  <!-- Add Arrows -->
  <div class="swiper-button-next">></div>
  <div class="swiper-button-prev">
    <</div>
  </div>

【讨论】:

@GarvitMangal 我正在寻找这个答案。如何使它可点击?我问了一个问题here @MainulQuraishi 尝试在swiper 中添加paginationClickable: true 属性

以上是关于如何将刷卡器中的分页项目符号更改为文本?的主要内容,如果未能解决你的问题,请参考以下文章

CouchDB 中的分页?

如何更改 DataTables jQuery 插件的分页按钮数量

1000 行中的 Angular 6 MatTable 性能

页面设置中“分页符”和“下一页”的区别是啥?

.NET Core API 项目中的分页

JQuery Mobile 中的分页符?