2017-05-27 24 views
2

我使用owlcarousel2滑塊項目,我想滑項目上顯示的是自定義類開始owlcarousel2滑蓋自定義類

jQuery(document).ready(function($){ 
 
    $(".owl-carousel").owlCarousel({ 
 
    \t items: '7', 
 
    \t rtl: true, 
 
    }); 
 
});
<div class="item"> 
 
\t <img src="http://welearn.site/wp-content/uploads/2016/09/k2.jpg" title="" alt="" /> 
 
</div> 
 
    <div class="item"> 
 
\t <img src="http://welearn.site/wp-content/uploads/2016/09/k2.jpg" title="" alt="" /> 
 
</div> 
 
    <div class="item"> 
 
\t <img src="http://welearn.site/wp-content/uploads/2016/09/k2.jpg" title="" alt="" /> 
 
</div> <div class="item"> 
 
\t <img src="http://welearn.site/wp-content/uploads/2016/09/k2.jpg" title="" alt="" /> 
 
</div> 
 
    <div class="item"> 
 
\t <img src="http://welearn.site/wp-content/uploads/2016/09/k2.jpg" title="" alt="" /> 
 
</div> 
 
    <div class="item"> 
 
\t <img src="http://welearn.site/wp-content/uploads/2016/09/k2.jpg" title="" alt="" /> 
 
</div> 
 
    <div class="item custom-slide"> 
 
\t <img src="http://welearn.site/wp-content/uploads/2016/09/k2.jpg" title="" alt="" /> 
 
</div>

我想滑塊開始自定義類「自定義幻燈片」

回答

3

您尚未指定您想要覆蓋哪個類。 (幾乎)所有貓頭鷹傳送帶2類都被描述爲here

默認情況下貓頭鷹旋轉木馬2生成以下代碼:

<div class="owl-carousel owl-theme owl-loaded"> 
    <div class="owl-stage-outer"> 
     <div class="owl-stage"> 
      <div class="owl-item">...</div> 
      <div class="owl-item">...</div> 
      <div class="owl-item">...</div> 
     </div> 
    </div> 
    <div class="owl-controls"> 
     <div class="owl-nav"> 
      <div class="owl-prev">prev</div> 
      <div class="owl-next">next</div> 
     </div> 
     <div class="owl-dots"> 
      <div class="owl-dot active"><span></span></div> 
      <div class="owl-dot"><span></span></div> 
      <div class="owl-dot"><span></span></div> 
     </div> 
    </div> 
</div> 

,如果你真的需要,你可以改變這些類初始化時,轉盤(雖然我無法找到這可能是更好的文檔中):

$('.owl-carousel').owlCarousel({ 
    items: '7', 
    rtl: true, 
    refreshClass: 'owl-refresh', 
    loadedClass: 'owl-loaded', 
    loadingClass: 'owl-loading', 
    rtlClass: 'owl-rtl', 
    responsiveClass: 'owl-responsive', 
    dragClass: 'owl-drag', 
    itemClass: 'owl-item', 
    stageClass: 'owl-stage', 
    stageOuterClass: 'owl-stage-outer', 
    grabClass: 'owl-grab', 
    autoHeightClass: 'owl-height', 
    navContainerClass: 'owl-nav', 
    navClass: [ 'owl-prev', 'owl-next' ], 
    slideBy: 1, 
    dotClass: 'owl-dot', 
    dotsClass: 'owl-dots' 
})