猫头鹰滑块自定义控件按钮

不幸的是，猫头鹰旋转木马渲染的控件不会帮助我用当前的项目，所以我试图用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

猫头鹰滑块自定义控件按钮

回答

相关问题