[英]Add 'Active' class to URL Hash Navigation button
https://owlcarousel2.github.io/OwlCarousel2/demos/urlhashnav.html https://owlcarousel2.github.io/OwlCarousel2/demos/urlhashnav.html
How can I add 'active' class to the buttons?如何向按钮添加“活动”类?
Currently buttons have a button.secondary:hover & button.secondary:focus to create a button background color change.当前按钮有一个 button.secondary:hover & button.secondary:focus 来创建按钮背景颜色变化。
This is fine, except whenever clicking anywhere in the slider the focus is changed and so the background color is removed from the button.这很好,除非每当单击滑块中的任意位置时焦点都会发生变化,因此按钮的背景颜色会被移除。
I need the buttons to have a dedicated active state, so that clicking within the slider is possible.我需要按钮具有专用的活动状态,以便可以在滑块内单击。
Thanks谢谢
You can solve this with javascript or jQuery, here's a jQuery example:您可以使用 javascript 或 jQuery 解决此问题,这是一个 jQuery 示例:
$(document).ready(function() {
$('.button').on('click', function(){
$('.button').removeClass('active');
$(this).addClass('active');
});
});
This removes the 'active' class for all buttons when you click any element with the class 'button' and adds it to the one you're clicking.当您单击具有“按钮”类的任何元素并将其添加到您单击的元素时,这将删除所有按钮的“活动”类。
After playing around for a long time, I came up with the solution.玩了半天,终于想到了解决办法。
<a class="night_tubing slidetabs" href="#night_tubing">NIGHT TUBING</a>
在哈希导航中添加 #link 作为类,在这种情况下添加一个额外的类“slidetabs”,例如<a class="night_tubing slidetabs" href="#night_tubing">NIGHT TUBING</a>
$('.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'); });
Note: this is works as expected so I have not worked any further on it, there may be better solutions with good coding out there.注意:这是按预期工作的,所以我没有进一步研究它,可能有更好的解决方案和良好的编码。
following is the full code:以下是完整代码:
Slider HTML:滑块 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: 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: CSS:
.slidetabs.active {
color: #ce2d27;
text-decoration: underline;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.