使用 Owl Carousel Url Hash Navigation 更改按钮样式

Question

这是我的猫头鹰轮播 HTML 和 javascript。

HTML：

<div id="owl-demo" class="owl-carousel owl-theme">
   <div class="item" data-hash="slide1">
      <img src="images/mainslider.png">
      <h1>Heading</h1>
      <p>Paragraph Text</p>
   </div>
   <div class="item" data-hash="slide2">
      <img src="images/mainslider.png">
      <h1>Heading</h1>
      <p>Paragraph Text</p>
   </div>
   <div class="item" data-hash="slide3">
      <img src="images/mainslider.png">
      <h1>Heading</h1>
      <p>Paragraph Text</p>
   </div>
</div>

JavaScript：

    $("#owl-demo").owlCarousel({

      navigation : true, // Show next and prev buttons
      slideSpeed : 300,
      paginationSpeed : 400,
      items : 1, 
      itemsDesktop : false,
      itemsDesktopSmall : false,
      itemsTablet: false,
      itemsMobile : false,
      URLhashListener:true,
      autoplayHoverPause:true,
      startPosition: 'URLHash'
  });

我在它下面有一个使用 Url Hash Navigation 的导航块。

<nav class="navbar navbar-default secondary-navbar">
<div class="container-fluid">
<div class="container">
<ul class="nav navbar-nav">
<li><a href="#slide1">Slide 1</a></li>
<li><a href="#slide2">Slide 2</a></li>
<li><a href="#slide3">Slide 3</a></li>
</ul>
</div>
</div>

当一张幻灯片被点击或出现在屏幕上时，我需要相应的链接来更改它的样式以显示它是当前活动的。

我还没有在 Owl Carousel 中找到任何本地方式来执行此操作，并且不确定如何使用 Javascript 来完成此操作

Answer 1

玩了半天，终于想到了解决办法。

1. 在哈希导航中添加#link 作为类，在这种情况下添加一个附加类“slidetabs”，例如<a class="night_tubing slidetabs" href="#night_tubing">NIGHT TUBING</a>
2. 获取当前幻灯片项，然后获取其数据哈希
3. 在更改的函数中将该数据哈希作为一个类提供给导航按钮，以将类添加到导航按钮
4. 然后对更改事件重复相同的操作以删除活动类
5. 在 .slidetabs.active 中添加一个 css

$('.owl-carousel').on('changed.owl.carousel', function(event) { var current = event.item.index; var hash = $(event.target).find(".owl-item").eq(current).find(".item").attr('data-hash'); $('.'+hash).addClass('active'); });

$('.owl-carousel').on('change.owl.carousel', function(event) { var current = event.item.index; var hash = $(event.target).find(".owl-item").eq(current).find(".item").attr('data-hash'); $('.'+hash).removeClass('active'); });

注意：这是按预期工作的，所以我没有进一步研究它，可能会有更好的解决方案和良好的编码。

以下是完整代码：

滑块 HTML：

<div class="owl-carousel owl-theme owl-loaded owl-drag">
   <div class="owl-stage-outer">
      <div class="owl-stage">
         <div class="owl-item">
            <div class="item" data-hash="cowboy_coaster">
               <!-- Slide Content -->
            </div>
         </div>
         <div class="owl-item">
            <div class="item" data-hash="night_tubing">
               <!-- Slide Content -->
            </div>
         </div>
         <!-- . -->
         <!-- . -->
         <!-- . -->
         <!-- . -->
      </div>
   </div>
</div>
</div>
<div class="owl-nav">
   <button type="button" role="presentation" class="owl-prev">
      <img class="slider-arrow" src="/wp-content/uploads/2019/01/slider-arrow-pre.png">
      <div class="slider-counter">1 / 4</div>
   </button>
   <button type="button" role="presentation" class="owl-next"><img class="slider-arrow" src="/wp-content/uploads/2019/01/slider-arrow-next.png"></button>
</div>
<div class="owl-dots disabled"></div>
<div class="owl-slider-tabs">
   <ul>
      <li>
         <a class="dining slidetabs active" href="#dining">DINING</a>
      </li>
      <li>
         <a class="night_tubing slidetabs" href="#night_tubing">NIGHT TUBING</a>
      </li>
      <li>
         <a class="cowboy_coaster slidetabs" href="#cowboy_coaster">COWBOY COASTER</a>
      </li>
      <li>
         <a class="lift_tickets slidetabs" href="#lift_tickets">LIFT TICKETS</a>
      </li>
   </ul>
</div>

Javascript：

jQuery(document).ready(function($) {
  $('.owl-carousel').on('initialized.owl.carousel changed.owl.carousel', function(e) {
    if (!e.namespace)  {
      return;
    }
    var carousel = e.relatedTarget;
    $('.slider-counter').text(carousel.relative(carousel.current()) + 1 + ' / ' + carousel.items().length);
    }).owlCarousel({
      nav:true,
      navText: ["<img class='slider-arrow' src='/wp-content/uploads/2019/01/slider-arrow-pre.png'><div class='slider-counter'>1 / 3</div>","<img class='slider-arrow' src='/wp-content/uploads/2019/01/slider-arrow-next.png'>"],
      loop:true,
      slideSpeed : 300,
      paginationSpeed : 400,
      items:1,
      dots:false,
      URLhashListener:true,
      startPosition: 'URLHash',
      autoplay:true,
      autoplayTimeout:9000,
      autoplayHoverPause:true,
      animateOut: 'fadeOut',
      animateIn: 'fadeIn',
    responsiveClass:true,
    responsive:{
        0:{
            items:1,
            nav:true
        },
        600:{
            items:1,
            nav:true
        },
        1000:{
            items:1,
            nav:true
        }
    }
  });

    $('.owl-carousel').on('changed.owl.carousel', function(event) {
      var current = event.item.index;
      var hash = $(event.target).find(".owl-item").eq(current).find(".item").attr('data-hash');
      $('.'+hash).addClass('active');
    });

    $('.owl-carousel').on('change.owl.carousel', function(event) {
      var current = event.item.index;
      var hash = $(event.target).find(".owl-item").eq(current).find(".item").attr('data-hash');
      $('.'+hash).removeClass('active');
    });

});

CSS：

.slidetabs.active {
    color: #ce2d27;
    text-decoration: underline;
}

Answer 2

Owl Carousel 原生支持此功能，请参阅文档中的此处： https://owlcarousel2.github.io/OwlCarousel2/docs/api-classes.html