Question

不幸的是，Owl Carousel渲染的控件对我当前的项目没有帮助，所以我试图用jQuery click事件更改幻灯片但是我没有运气。

我一直关注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标签时，轮播会转到下一张幻灯片，但事实并非如此，我的控制台也没有错误。

知道我可能会出错吗？

谢谢，尼克

Answer 1

试试这个：

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();
});

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

1 个答案: