这份代码在手机上,当删除一个slide,再增加一个的时候,swiper只会减少,不会增加,贴上代码。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Swiper Playground</title>
<link rel="stylesheet" href="http://www.swiper.com.cn/dist/css/swiper.min.css">
<!--<link rel="stylesheet" href="../dist/css/swiper.min.css"/>-->
<meta name="viewport" content="width=device-width">
</head>
<body>
<div class="swiper-container">
<div class="swiper-scrollbar"></div>
<div class="swiper-button-prev btn"></div>
<div class="swiper-button-next btn"></div>
<div class="swiper-wrapper">
</div>
<div class="swiper-pagination"></div>
</div>
<style>
body,html {
padding: 0;
margin: 0;
position: relative;
height: 100%;
}
.swiper-container {
width: 100%;
height: 300px;
margin: 50px auto;
}
.swiper-slide {
background: #f1f1f1;
color: #000;
text-align: center;
line-height: 300px;
}</style>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://www.swiper.com.cn/dist/js/swiper.min.js"></script>
<script>
$(function() {
var arr = [],
curIndex = 3,
slideArr= [],
initialSlide = 2;
for(var i = 1; i < 51; i++) {
arr.push("slide" + i);
}
if(curIndex>50-3){
initialSlide =5-(50-curIndex);
slideArr = arr.slice(45,50);
}else if(curIndex < 2){
initialSlide = curIndex;
slideArr = arr.slice(0,5);
}else{
slideArr = arr.slice(curIndex-2,curIndex+3);
}
console.log(slideArr);
slideArr.forEach(function(item,index){
var $slide = $('<div class="swiper-slide">' + item + '</div>');
$('.swiper-wrapper').append($slide);
});
$('.swiper-wrapper').on('click', '.swiper-slide', function() {
alert($(this).text());
})
function ignorClick(ele){
if(ele && ele.ignorClick) return true;
ele.ignorClick = true;
setTimeout(function(){
ele.ignorClick = false;
}, 500);
}
$('.btn').each(function(){
$(this).click(function(){
ignorClick(this);
})
})
var swiper = new Swiper('.swiper-container', {
spaceBetween: 50,
slidesPerView: 1,
grabCursor: true,
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
pagination: '.swiper-pagination',
initialSlide: initialSlide,
observer: true, //修改swiper自己或子元素时,自动初始化swiper,
onSlideNextEnd: function(swiper) {
console.log("下一页");
if(curIndex<2) curIndex++;
console.log(curIndex+'ssssasda');
if(swiper.activeIndex<=2)return;
if(!arr[curIndex + 3]) return;
var $c = $('.swiper-wrapper .swiper-slide').eq(0);
$c = $c.clone(true);
swiper.removeSlide(0);
$c.html(arr[curIndex + 3]);
$c.appendTo($(".swiper-wrapper"));
curIndex++;
},
onSlidePrevEnd: function(swiper) {
console.log("上一页");
if(swiper.activeIndex>1){
curIndex--;
return;
}
if(!arr[curIndex - 3])return;
var $c = $('.swiper-wrapper .swiper-slide').eq(4);
$c = $c.clone(true);
swiper.removeSlide(4);
$c.text(arr[curIndex - 3]);
$c.prependTo($(".swiper-wrapper"));
swiper.activeIndex++;
curIndex--;
}
});
})
</script>
</body>
</html>
每次改变都初始化一下看看,swiper.init()