(五)Swiperペーパ
2694 ワード
(1)本節の知識点使用ページング:pagination ページングスタイル:paginationType ページング可能ポイント:paginationClickable 非表示ページングを表示:paginationHide ページングラベルタイプを指定:paginationElement ペーサレンダリング paginationBulletRender paginationFractionRender paginationProgressRender
(2)コード実装
(2)コード実装
Document
window.onload = function() {
var mySwiper = new Swiper('.swiper-container', {
direction: 'horizontal', // ， horizontal, vertical
//pagination: ".nav", // 。 swiper-pagination
pagination: ".swiper-pagination",
paginationType: "bullets",
// /* bullets fraction 1/3 progress */
paginationClickable: true, // true false
//paginationHide: true, // ,
paginationElement: "i", // li DIV
// HTML
paginationBulletRender: function(swiper, index, classname) {
return "<span class='" + classname + "'style='color:#fff;line-height:45px;'>" + index +
"</span>"
},
//
// paginationFractionRender: function(swiper, index, classname) {
// return "<span class='" + classname + "'style='color:#fff;line-height:45px;'>" + index +
// "</span>"
// },
// //
// paginationProgressRender: function(swiper, index, classname) {
// return "<span class='" + classname + "'style='color:#fff;line-height:45px;'>" + index +
// "</span>"
// },
})
}