我一直在尝试使用带有自定义类的滑动滑块来创建一些幻灯片。
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
<div class="swiper-slide">Slide 10</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
<!-- Swiper JS -->
<script src="../dist/js/swiper.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: true,
paginationBulletRender: function (swiper, index, className) {
return '<span class="' + className + '">' + (index + 1) + '</span>';
}
});
</script>
滑动分页是动态创建的并生成为
<span class="swiper-pagination-bullet">1</span>
<span class="swiper-pagination-bullet">2</span>
<span class="swiper-pagination-bullet">3</span>
<span class="swiper-pagination-bullet">4</span>
<span class="swiper-pagination-bullet">5</span>
<span class="swiper-pagination-bullet">6</span>
我想让 div 类 swiper 分页到
<span class="swiper-pagination-bullet color-0">1</span>
<span class="swiper-pagination-bullet color-1">2</span>
<span class="swiper-pagination-bullet color-2">3</span>
如何添加额外的自定义类 color-0、color-1、color-2？非常感谢。
return '<span class="'+ className +' color-'+index+'" >'+(index+1)+'</span>';
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句