swiper多层嵌套,页面加载有时banner没有高度

![最外层的pages是大的滑动切换,然后中间的scroll-container是长内容滚动,在第一个最内层的wrapper slide中还嵌套着一个轮播,var html = '';

html += '<div class="swiper-container" id="swiper-banners" style="height:100%;>';
    html += '<div class="swiper-wrapper sw_banner" style="height:100%;>';  
        html += '<div class="swiper-slide sw_slide" style="height:100%;"><img src="images/1.jpg" alt=""></div>';
        html += '<div class="swiper-slide sw_slide" style="height:100%;><img src="images/2.jpg" alt=""></div>';
        html += '<div class="swiper-slide sw_slide" style="height:100%;><img src="images/3.jpg" alt=""></div>';
        html += '<div class="swiper-slide sw_slide" style="height:100%;><img src="images/4.jpg" alt=""></div>';
        html += '<div class="swiper-slide sw_slide" style="height:100%;><img src="images/5.jpg" alt=""></div>';
        html += '<div class="swiper-slide sw_slide" style="height:100%;><img src="images/6.jpg" alt=""></div>';
    html += '</div>';

    html += '<div class="pagination"></div>';
html += '</div>';

然后页面加载的时候就会出现问题,有时候banner的盒子都会没有高度,图片获取到了但是高度没有,发现new swiper的一些问题,但是有时刷新一次,两次以后就会有了,求教这是什么问题。

//Init Navigation

var nav = $('.swiper-nav').swiper({
slidesPerView: 4,
freeMode:true,
freeModeFluid:true,
onSlideClick: function(nav){
var index=nav.clickedSlideIndex;
pages.swipeTo( nav.clickedSlideIndex);
$('.swiper-slide').eq(index).addClass('tabbat_la_index' ).siblings().removeClass("tabbat_la_index");
}
})

//Function to Fix Pages Height
function fixPagesHeight() {
$('.swiper-pages').css({
height: $(window).height()-nav.height
})
}
$(window).on('resize',function(){
fixPagesHeight()
})
fixPagesHeight()

//Init Pages
var pages = $('.swiper-pages').swiper({
onTouchEnd: function(pages){
var index=pages.activeIndex;
$('.swiper-slide').eq(index).addClass('tabbat_la_index' ).siblings().removeClass("tabbat_la_index");
},
onSlideChangeEnd: function(pages){
var index=pages.activeIndex;
$('.swiper-slide').eq(index).addClass('tabbat_la_index' ).siblings().removeClass("tabbat_la_index");
},
observer: true,
observeParents: true
})

var as;
//Scroll Containers
$('.scroll-container').each(function(index){
if(index==0){
as=$(this).swiper({
mode:'vertical',
scrollContainer: true,
mousewheelControl: true,
scrollbar: {
container:$(this).find('.swiper-scrollbar')[0]
},
slidesPerView:'auto',
observer: true,
observeParents: true,
})

}else{
    $(this).swiper({
        mode:'vertical',
        scrollContainer: true,
        mousewheelControl: true,
        scrollbar: {
            container:$(this).find('.swiper-scrollbar')[0]
        }

    })
}

})

var html = '';
html += '

';
html += '<div class="swiper-container" id="swiper-banners" style="height:100%;>';
    html += '<div class="swiper-wrapper sw_banner" style="height:100%;>';  
        html += '<div class="swiper-slide sw_slide" style="height:100%;"><img src="images/1.jpg" alt=""></div>';
        html += '<div class="swiper-slide sw_slide" style="height:100%;><img src="images/2.jpg" alt=""></div>';
        html += '<div class="swiper-slide sw_slide" style="height:100%;><img src="images/3.jpg" alt=""></div>';
        html += '<div class="swiper-slide sw_slide" style="height:100%;><img src="images/4.jpg" alt=""></div>';
        html += '<div class="swiper-slide sw_slide" style="height:100%;><img src="images/5.jpg" alt=""></div>';
        html += '<div class="swiper-slide sw_slide" style="height:100%;><img src="images/6.jpg" alt=""></div>';
    html += '</div>';

    html += '<div class="pagination"></div>';
html += '</div>';

var bannerSwiper = $('#swiper-banners').swiper({
pagination : '.pagination',
autoplay : 3000,
loop : true,
grabCursor : true,
visibilityFullFit : true,
paginationClickable : true,
updateOnImagesReady : true,
observer : true,
observeParents : true
})

as.prependSlide(html,'swiper-slide','div');
as.updateActiveSlide(0);
as.reInit();图片说明](https://img-ask.csdn.net/upload/201711/07/1510025649_714579.png)

1个回答

高度不用100%,直接付个px值, 或者img设置个宽度

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问