
pagination为不同的图片,可滑动,支持点击
var mySwiper = new Swiper(".swiper-container", {
pagination: {
el: ".swiper-pagination",
type: 'custom',
renderCustom:function(swiper,current,total){
var paginationHtml = '';
var text = ['等级专属券','免邮特权','生日礼券']
for(var i=1;i<=total;i++){
if(i==current){
paginationHtml+=`<div class='pagination pagination_active'>
<span class='pagination_icon icon${i}'></span>
<span class='pagination_text'>${text[i-1]}</span>
</div>`
}else{
paginationHtml+=`<div class='pagination'>
<span class='pagination_icon icon${i}'></span>
<span class='pagination_text'>${text[i-1]}</span>
</div>`
}
};
return paginationHtml
}
},
hashNavigation: {
watchState: true,
},
clickable :true,
});
$('.swiper-pagination').on('click','.pagination',function(){
var index = $(this).index();
mySwiper.slideTo(index, 1000, false);
})
首先我们需要明白swiper 想要速度的效果是需要用到 transition-timing-function: 这个参数的 其次需要配合speed:1200,使用 lin
最后一屏底部自动高度的方法为 slidesPerView:auto, css代码 .foot{height:auto!important;} 但是这种情况会出现滚动到最后一屏的
slidesPerView:1,autoplay:3000,direction:vertical,grabCursor:true,autoplayDisableOnInteraction:false,mousewheelControl:true,autoHeight:true,//重点就是
直接鼠标hover模拟click即可! $(.swiper-pagination-bullet).hover(function(){$(this).click();//鼠标划上去之后,自动触发点击事件来
swiper嵌套的swiper怎样实现鼠标滚动切换,当嵌套的切换完之后,在继续切换外面的swiper !DOCTYPEhtml!--savedfromurl=(0044)ht