如何将刷卡器中的分页项目符号更改为文本?
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
属性以上是关于如何将刷卡器中的分页项目符号更改为文本?的主要内容,如果未能解决你的问题,请参考以下文章
如何更改 DataTables jQuery 插件的分页按钮数量