与pagerCustom一起使用时，BX-Slider活动类不起作用 [英] BX-Slider active class not working when using with pagerCustom which is also slider
本文介绍了与pagerCustom一起使用时，BX-Slider活动类不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
与pagerCustom一起使用时，BX-Slider活动类不起作用.分页器也是活动类别为红色边框的滑块.知道如何解决吗?
BX-Slider active class not working when using with pagerCustom. Pager is also slider with active class which is with red border. Any idea how to fix it?
HTML:
<ul class="bxslider">
<li><img src="http://bxslider.com/images/730_200/hill_trees.jpg" /></li>
<li><img src="http://bxslider.com/images/730_200/me_trees.jpg" /></li>
<li><img src="http://bxslider.com/images/730_200/houses.jpg" /></li>
<li><img src="http://bxslider.com/images/730_200/tree_root.jpg" /></li>
<li><img src="http://bxslider.com/images/730_200/hill_fence.jpg" /></li>
<li><img src="http://bxslider.com/images/730_200/trees.jpg" /></li>
</ul>
<div id="bx-pager">
<a data-slide-index="0" href=""><img src="http://bxslider.com/images/730_200/hill_trees.jpg" width="100" /></a>
<a data-slide-index="1" href=""><img src="http://bxslider.com/images/730_200/me_trees.jpg" width="100" /></a>
<a data-slide-index="2" href=""><img src="http://bxslider.com/images/730_200/houses.jpg" width="100" /></a>
<a data-slide-index="3" href=""><img src="http://bxslider.com/images/730_200/tree_root.jpg" width="100" /></a>
<a data-slide-index="4" href=""><img src="http://bxslider.com/images/730_200/hill_fence.jpg" width="100" /></a>
<a data-slide-index="5" href=""><img src="http://bxslider.com/images/730_200/trees.jpg" width="100" /></a>
</div>
jQuery:
$('.bxslider').bxSlider({
pagerCustom: '#bx-pager'
});
$('#bx-pager').bxSlider({
mode: 'horizontal',
pager: false
});
https://jsfiddle.net/w259nfeu/
推荐答案
顶部滑块没有控件，它的移动与第二个滑块/寻呼机绑定在一起.第二个滑块看起来只有一个幻灯片，所以很奇怪，因此我将它做成一个轮播，其中有3个幻灯片一次移动一个.轮换为:
The top slider has no controls, it's movement is tied into the second slider/pager. The second slider looked weird with only one slide, so I made it a carousel with 3 slides moving one at a time. The rotation is:
- 每次单击箭头都会使两个滑块朝同一方向前进.
- 在一个方向上每6次单击将使顶部滑块返回到与第二个滑块的中间滑块相同的幻灯片.
- 单击第二个滑块的一个幻灯片，将使第一个滑块跳到相应的幻灯片.
由于某种原因，堆栈片段存在DNS问题，因此请查看
For some reason, the stack snippet is having DNS issues, so take a look at the
演示: http://plnkr.co/edit/IytWudzqeXyYMZwIQnbA?p=preview
Demo: http://plnkr.co/edit/IytWudzqeXyYMzwIQnbA?p=preview
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SO35203571</title>
<link rel="stylesheet" href="http://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.css" />
<style>
#bx-pager {
left: 25px;
}
.bx-wrapper a.active {
border: 2px solid red;
}
.bx-controls-direction a {
top: -100% !important;
}
}
</style>
</head>
<body>
<ul class="bxslider">
<li>
<img src="http://bxslider.com/images/730_200/hill_trees.jpg" />
</li>
<li>
<img src="http://bxslider.com/images/730_200/me_trees.jpg" />
</li>
<li>
<img src="http://bxslider.com/images/730_200/houses.jpg" />
</li>
<li>
<img src="http://bxslider.com/images/730_200/tree_root.jpg" />
</li>
<li>
<img src="http://bxslider.com/images/730_200/hill_fence.jpg" />
</li>
<li>
<img src="http://bxslider.com/images/730_200/trees.jpg" />
</li>
</ul>
<div id="bx-pager">
<a data-slide-index="0" href="">
<img src="http://bxslider.com/images/730_200/hill_trees.jpg" width="100" />
</a>
<a data-slide-index="1" href="">
<img src="http://bxslider.com/images/730_200/me_trees.jpg" width="100" />
</a>
<a data-slide-index="2" href="">
<img src="http://bxslider.com/images/730_200/houses.jpg" width="100" />
</a>
<a data-slide-index="3" href="">
<img src="http://bxslider.com/images/730_200/tree_root.jpg" width="100" />
</a>
<a data-slide-index="4" href="">
<img src="http://bxslider.com/images/730_200/hill_fence.jpg" width="100" />
</a>
<a data-slide-index="5" href="">
<img src="http://bxslider.com/images/730_200/trees.jpg" width="100" />
</a>
</div>
<script src="http://cdn.jsdelivr.net/jquery/2.2.0/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.min.js"></script>
<script>
$(function() {
var bx = $('.bxslider').bxSlider({
pagerCustom: '#bx-pager',
controls: false
});
var cx = $('#bx-pager').bxSlider({
mode: 'horizontal',
maxSlides: 3,
minSlides: 3,
moveSlides: 1,
slideWidth: 275,
slideMargin: 40,
pager: false,
onSlideBefore: bxMove
});
function bxMove($ele, from, to) {
var idx = parseInt(to, 10) - 1;
bx.goToSlide(idx);
}
});
</script>
</body>
</html>
这篇关于与pagerCustom一起使用时，BX-Slider活动类不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
