我正在尝试使用Swiper 4.0.6创建自定义的分页卷轴。
我想要类似于此页面中途的滚动器的东西。请参阅每个滚动部分上方的标题。
根据API,我可以使用renderCustom
函数。我似乎无法正常工作。我看不到屏幕上的分页,尽管刀片正常。
有人可以帮助解决这个问题吗?
到目前为止我的代码;
html
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" data-name="Item 1">
<p>Testing</p>
</div>
<div class="swiper-slide" data-name="Item 2">
<p>Testing</p>
</div>
<div class="swiper-slide" data-name="Item 3">
<p>Testing</p>
</div>
</div>
<div class="swiper-pagination1"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
JS
var names = [];
$(".swiper-wrapper .swiper-slide").each(function(i) {
names.push($(this).data("name"));
});
var swiper1 = new Swiper('.swiper-container', {
pagination: {
el: '.swiper-pagination1',
type: 'custom',
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
renderCustom: function(swiper, current, total) {
var text = "<span class='pContainer' style='background-color:transperent;text-align: center;width:100%; display:block'>";
for (let i = 1; i <= total; i++) {
if (current == i) {
text += "<span style='display:inline-block;border-top:3px solid #afd869;text-align:left;margin-right:4px;width: 20%;color:#afd869;padding:5px;'>" + names[i] + "</span>";
} else {
text += "<span style='display:inline-block;border-top:3px solid white;text-align:left; margin-right:4px;width: 20%;color:white;padding:5px;'>" + names[i] + "</span>";
}
}
text += "</span>";
return text;
}
});
任何建议都将不胜感激。
您必须将RenderCustom函数放在分页中:
var names = [];
$(".swiper-wrapper .swiper-slide").each(function(i) {
names.push($(this).data("name"));
});
var swiper1 = new Swiper('.swiper-container', {
pagination: {
el: '.swiper-pagination1',
type: 'custom',
renderCustom: function(swiper, current, total) {
var text = "<span class='pContainer' style='background-color:transperent;text-align: center;width:100%; display:block'>";
for (let i = 1; i <= total; i++) {
//alert(total);
if (current == i) {
text += "<span style='display:inline-block;border-top:3px solid #afd869;text-align:left;margin-right:4px;width: 20%;color:#afd869;padding:5px;'>" + names[i-1] + "</span>";
}
else {
text += "<span style='display:inline-block;border-top:3px solid white;text-align:left; margin-right:4px;width: 20%;color:white;padding:5px;'>" + names[i] + "</span>";
}
}
text += "</span>";
return text;
}
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
}
});
并将样式放在跨度上。Swiper-Pagination-Custom类似:
.swiper-pagination-custom{
position: absolute;
bottom: 0;
z-index: 10;
}