猫头鹰旋转木马2测试版,添加“;选择“;类

Owl Carousel 2 beta , add "selected" class on Url Hash Navigation

本文关键字:选择 添加 旋转木马 测试版 猫头鹰      更新时间:2023-09-26

我正在尝试将"selected"类添加到"url hash button"中。

查看原始演示:http://www.owlcarousel.owlgraphic.com/demos/urlhashnav.html

我希望<a class="button secondary url" href="#zero">zero</a>在点击它、项目自动播放或拖动/滑动项目时变为<a class="button secondary url selected" href="#zero">zero</a>

我尝试了一个按钮来测试,但它不起作用:

HTML:

 <div id="owl-appt" class="owl-carousel">
        <div class="item one" data-hash="one"><img src="img/gallery/home/appt1/1.jpg" alt=""></div>
        <div class="item two" data-hash="two"><img src="img/gallery/home/appt1/2.jpg" alt=""></div>
        <div class="item three" data-hash="three"><img src="img/gallery/home/appt1/3.jpg" alt=""></div>
</div>

      <a class="url one" href="#one"><img src="img/gallery/home/appt1/s1.jpg" /></a>
      <a class="url two" href="#two"><img src="img/gallery/home/appt1/s2.jpg" /></a>
      <a class="url three" href="#three"><img src="img/gallery/home/appt1/s3.jpg" /></a>

JS:

$("#owl-appt").owlCarousel(
          {
            items : 1,
            autoplay:false,           
            animateOut: 'fadeOut',
            loop:false,
            responsive: true,
            callbacks: true,
            URLhashListener:true,
            startPosition: '#one',
          });
if($("#owl-appt .item.one").parent().is(".active")){
  $("a.url.one").addClass("selected");
}else{
  $("a.url.one").removeClass("selected");
};

我认为,如果#owl-appt.item是活动的,则需要比较数据hash="#one"和a href="#one"的内容,以及您是否被分配到"selected"链接。对不起,我不是程序员,只是HTML程序员,但我对这个问题太感兴趣了。