用avalon框架怎么做轮播图?

avalon这个框架其实特别的小众,做个轮播图呢?在github上的例子只有一个,而且功能特别的少,有的引入的插件与avalon里面的指令又不兼容,所以找了一个owl-carousel,目前实现了移动端的自动轮播和手滑动,其中导航点还在尝试~

 
    <div class="page-banner owl-carousel owl-theme owl-loaded owl-drag" id="slideshow"  style="max- 37.5rem;" >
       
             <div class="item" style="margin:0" id="move6"   onClick="javascript:;" >      
                <a class="img" ms-attr="{href:@link1}"> 
                      <img ms-attr="{src: @carousel1}">       
                </a>
            </div>     
            <div class="item" id="move2" style="margin:0" >      
                <a class="img" ms-attr="{href:@link2}" >    
                      <img ms-attr="{src: @carousel2}" >       
                </a>
            </div>   
             <div class="item" id="move3" style="margin:0" >      
                <a class="img" ms-attr="{href:@link3}">    
                      <img ms-attr="{src: @carousel3}"  >       
                </a>
            </div>
             <div class="item" id="move4" style="margin:0"  >      
                <a class="img" ms-attr="{href:@link4}">    
                      <img ms-attr="{src: @carousel4}" >       
                </a>
            </div>  
             <div class="item" id="move5" style="margin:0" >      
                <a class="img" ms-attr="{href:@link5}">    
                      <img ms-attr="{src: @carousel5}" >       
                </a>
            </div>             
      
   </div>

  getlunbo:function(){
             $.get('/getBannerInfo', {
    
             }, function(res) {
                if (res.code == '200') {
                   vmi.carousel1=res.data[0].image
                   vmi.carousel2=res.data[1]&&res.data[1].image
                   vmi.carousel3=res.data[2]&&res.data[2].image
                   vmi.carousel4=res.data[3]&&res.data[3].image
                   vmi.carousel5=res.data[4]&&res.data[4].image
                   vmi.link1=res.data[0].link
                   vmi.link2=res.data[1]&&res.data[1].link
                   vmi.link3=res.data[2]&&res.data[2].link
                   vmi.link4=res.data[3]&&res.data[3].link
                   vmi.link5=res.data[4]&&res.data[4].link

                   if(!res.data[1]){
                      $('.page-banner  #move2').remove()  
                   } 
                   if(!res.data[2]){
                      $('.page-banner  #move3').remove()     
                   
                   }
                   if(!res.data[3]){
                      $('.page-banner  #move4').remove()                       
                   }
                  if(!res.data[4]){
                      $('.page-banner  #move5').remove()                       
                   }
                   if(res.data.length=='1'){
                       $('#move6').remove()
                   }else{
                       $('#move1').remove() 
                       vmi.lunbodiaoyong()
                   } 
                                     
                }else if(res.code=="204"){
                    $('#slideshow').remove()
                    $('#move1').remove() 

                }
            })
          
        },
        lunbodiaoyong:function(){
            $('#slideshow').owlCarousel({
                items: 1,
                loop:true,
                lazyLoad:true,
                autoplay:true,
                autoplayTimeout:6000,
                // pagination:true,
                dots:true,
                // nav:true,
                navText:['<i class="fa fa-angle-left"></i>','<i class="fa fa-angle-right"></i>'],

           });
        },
       

    })
    avalon.filters.getday = function(times) {
        return Math.round(times / 86400)
    }

    vmi.$watch('onReady', function() {
        vmi.getlunbo()
        vmi.getcurrentdate()
        vmi.getduelists()
        vmi.currentSelect = vmi.setting.currenttry;
        vmi.tryGoodsList()
        // vmi.awardPeople()
        vmi.checkUserAwardStatus()
       
       

    })
因为这里我们要求是图片是五张任意上的,如果只有一张的话就不轮播,这里owl-carousel与ms-for这样的指令是不兼容的~