貓頭鷹滑塊自定義控件按鈕

不幸的是，貓頭鷹旋轉木馬渲染的控件不會幫助我用當前的項目，所以我試圖用jQuery單擊事件來更改幻燈片，但是我沒有運氣。貓頭鷹滑塊自定義控件按鈕

我一直在關注Owl Carousel網站上的文檔。

這是jQuery的，我已經成功地制訂：

var owl = $('.owl-carousel'); 
    owl.owlCarousel(); 
    $('.car-hub-header-learn-more').click(function() { 
     owl.trigger('next.owl.carousel'); 
    })

這是我a標記HTML：

<a href="#" class="car-hub-header-learn-more"><i class="fa fa-phone" aria-hidden="true"></i> Request Callback</a>

所有轉盤HTML的要求：

<div id="owl-new-car-main" style="position: relative; margin-bottom: -3px; opacity: 1; display: block;" class="owl-carousel owl-theme"> 
    <div class="owl-wrapper-outer"><div class="owl-wrapper" style="width: 7612px; left: 0px; display: block; transform: translate3d(0px, 0px, 0px);"><div class="owl-item" style="width: 1903px;"><div class="item"> 
    <div class="container"> 
     <div class="row"> 
     <div class="col-lg-12"> 
      <h1>Scirocco</h1> 
     </div> 
     </div> 
     <div class="row middle-xs"> 
     <div class="car-hub-header-image-box col-lg-12"> 
      <div class="row middle-lg center-lg"> 
      <div class="col-lg-3"> 
       <a href="#" class="car-hub-header-learn-more">Learn More <i class="fa fa-angle-right" aria-hidden="true"></i></a> 
      </div> 
      <div class="col-lg-6"> 
       <img src="/img/new-car-template/scirocco-transparent.png" alt="Scirocco GT"> 
      </div> 
      <div class="col-lg-3"> 
       <a href="#" class="car-hub-header-learn-more"><i class="fa fa-phone" aria-hidden="true"></i> Request Callback</a> 
      </div> 
      </div> 
     </div> 
     <div class="car-hub-header-info-container col-lg-12"> 
      <div class="row start-lg"> 
      <div class="col-lg-12 car-hub-header-info-box"> 
       <h2>FEATURED DEAL <i class="fa fa-star-o" aria-hidden="true"></i></h2> 
       <span class="medium-underline"></span> 
       <h3 class="car-hub-header-model-variant">GT Black Edition - 1.4 TSI Manual</h3> 
       <div class="row center-lg car-hub-offer-container"> 
       <div class="col-lg-3 car-hub-header-offer-1"> 
        <h2>£198 <span>Monthly</span></h2> 
       </div> 
       <div class="col-lg-3 car-hub-header-offer-2"> 
        <h2>£1500 <span>Deposit Contribution</span></h2> 
       </div> 
       <div class="col-lg-3 car-hub-header-offer-3"> 
        <h2>£198 <span>Customer Deposit</span></h2> 
       </div> 
       </div> 
      </div> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div></div><div class="owl-item" style="width: 1903px;"><div class="item item-2"> 
    <div class="container"> 

    </div> 
    </div></div></div></div> 

</div>

我希望當我點擊我的a標籤時，傳送帶會進入下一個幻燈片，但事實並非如此，我的控制檯也沒有出現任何錯誤。

任何想法，我可能會出錯？

謝謝，尼克

來源

2016-04-25 Nick Maddren

分享HTML太; – itzmukeshy7

提供所有HTML –

嘗試在'a'標籤內添加'e.preventDefault（）'點擊處理程序 - $（'。car-hub-header-learn-more'）。click（function（e）{owl。 trigger（'next.owl.carousel'）; e.preventDefault（）;}）' – Bhumika107

試試這個：

var $dots = $('.owl-dot'); 

function goToNextCarouselPage() {  
    var $next = $dots.filter('.active').next(); 

    if (!$next.length) 
     $next = $dots.first(); 

    $next.trigger('click'); 
} 

$('.car-hub-header-learn-more').click(function() { 
    goToNextCarouselPage(); 
});

來源

2016-04-25 11:32:50

貓頭鷹滑塊自定義控件按鈕

回答

相關問題