最外層的pages是大的滑動(dòng)切換，然后中間的scroll-container是長(zhǎng)內(nèi)容滾動(dòng)，在第一個(gè)最內(nèi)層的wrapper slide中還嵌套著一個(gè)輪播，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>';
    
    然后頁(yè)面加載的時(shí)候就會(huì)出現(xiàn)問(wèn)題，有時(shí)候banner的盒子都會(huì)沒(méi)有高度，圖片獲取到了但是高度沒(méi)有，發(fā)現(xiàn)new swiper的一些問(wèn)題，但是有時(shí)刷新一次，兩次以后就會(huì)有了，求教這是什么問(wèn)題。

//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 += '<div style="height:0.89rem;"></div>';
    
    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();