In my project : http://moransh4.github.io/Luca/
I need to change the swiper-pagination-bullet at the last section to this:
The "active" change to green.
I read ( from : http://idangero.us/swiper/api/) that i can customize with this :
paginationBulletRender: function (index, className) {
return '<span class="' + className + '">' + (index + 1) + '</span>';
}
Sorry i go lost with it,
How to do it?
You should instead use paginationCustomRender
to create custom design.Define your names
in each div
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" alt="">
</div>
<div class="swiper-slide" data-name="DESIGN">
<img src="http://placehold.it/600x300" alt="">
</div>
<div class="swiper-slide" data-name="PERFORMANCE">
<img src="http://placehold.it/600x300" alt="">
</div>
<div class="swiper-slide" data-name="DESIGN">
<img src="http://placehold.it/600x300" alt="">
</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>