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

Question

![最外层的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)

Answer 1

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