swiper动态加载的问题

Question

swiper动态加载的问题

发布于
2017-04-01

这份代码在手机上，当删除一个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>

javascript css

html5

阅读 5.4k

1 个回答

得票最新

sf_9735

212

发布于
2017-08-09

新手上路，请多包涵

每次改变都初始化一下看看，swiper.init()

撰写回答