是否可以突出显示Flexslider carousel中的当前项,以便我可以向活动项添加类?
我使用Flexslider旋转木马的基本设置。现在我想有一个脚本,将添加活动到每个幻灯片内的viewport可见。
我用这个例子:http://flexslider.woothemes.com/basic-carousel.html
我现在如何在开始函数中获得Flexslider属性。当我给这个函数提供我可以请求的参数时——列表中项目的总数,它将移动多少个项目,以及将进行多少分页。我不知道是否可以编写一个公式来计算给定变量下哪一个是活动的,所以我可以突出显示它们。
$('.flexslider').flexslider({
animation: "slide",
animationLoop: false,
slideshow: false,
itemWidth: 460,
itemMargin: 30,
minItems: 2,
maxItems: 6,
controlNav: false,
customDirectionNav: ".custom-direction li a",
start: function(slider) {
var pagingCount = slider.pagingCount;
var move = slider.move;
var visibleSlides = slider.visible;
var totalSlides = slider.count;
console.log(slider);
console.log(slider.move);
console.log(slider.update);
if (totalSlides) {
$('.slides li').addClass('active-slides');
};
// console.log(slider.count);
// console.log(slider.currentSlide);
}
});
我已经做了一个开始,但不知道if语句或for循环应该是什么样子来完成这个。
任何想法?
使用事件start
和'after'来处理此问题。请看下面的例子。
$('.flexslider').flexslider({
animation: "slide",
animationLoop: false,
slideshow: false,
itemWidth: 460,
itemMargin: 30,
minItems: 2,
maxItems: 6,
controlNav: false,
customDirectionNav: ".custom-direction li a",
start: function (slider) {
window.addCurrentSlidesClass(slider);
},
after: function (slider) {
window.addCurrentSlidesClass(slider);
}
});
window.addCurrentSlidesClass = function (slider) {
//debugger;
$('.flexslider li').removeClass("active-slides");
var startli = (slider.move * (slider.currentSlide));
var endli = (slider.move * (slider.currentSlide + 1));
for (i = startli + 1; i <= endli; i++) {
$('.flexslider li:nth-child(' + i + ')').addClass('active-slides');
}
}
<div class="flexslider carousel">
<div class="flex-viewport" style="overflow: hidden; position: relative;">
<ul class="slides" style="width: 2400%; transition-duration: 0.6s; transform: translate3d(0px, 0px, 0px);">
<li style="width: 210px; float: left; display: block;">
<img src="images/kitchen_adventurer_cheesecake_brownie.jpg" draggable="false">
</li>
<li style="width: 210px; float: left; display: block;">
<img src="images/kitchen_adventurer_lemon.jpg" draggable="false">
</li>
<li style="width: 210px; float: left; display: block;">
<img src="images/kitchen_adventurer_donut.jpg" draggable="false">
</li>
<li style="width: 210px; float: left; display: block;">
<img src="images/kitchen_adventurer_caramel.jpg" draggable="false">
</li>
<li style="width: 210px; float: left; display: block;">
<img src="images/kitchen_adventurer_cheesecake_brownie.jpg" draggable="false">
</li>
<li style="width: 210px; float: left; display: block;">
<img src="images/kitchen_adventurer_lemon.jpg" draggable="false">
</li>
<li style="width: 210px; float: left; display: block;">
<img src="images/kitchen_adventurer_donut.jpg" draggable="false">
</li>
<li style="width: 210px; float: left; display: block;">
<img src="images/kitchen_adventurer_caramel.jpg" draggable="false">
</li>
<li style="width: 210px; float: left; display: block;">
<img src="images/kitchen_adventurer_cheesecake_brownie.jpg" draggable="false">
</li>
<li style="width: 210px; float: left; display: block;">
<img src="images/kitchen_adventurer_lemon.jpg" draggable="false">
</li>
<li style="width: 210px; float: left; display: block;">
<img src="images/kitchen_adventurer_donut.jpg" draggable="false">
</li>
<li style="width: 210px; float: left; display: block;">
<img src="images/kitchen_adventurer_caramel.jpg" draggable="false">
</li>
</ul>
</div>
<ol class="flex-control-nav flex-control-paging">
<li><a class="flex-active">1</a>
</li>
<li><a class="">2</a>
</li>
<li><a class="">3</a>
</li>
</ol>
<ul class="flex-direction-nav">
<li class="flex-nav-prev"><a class="flex-prev flex-disabled" href="#" tabindex="-1">Previous</a>
</li>
<li class="flex-nav-next"><a class="flex-next" href="#" tabindex="-1">Next</a>
</li>
</ul>
<div class="flex-pauseplay"><a class="flex-pause">Pause</a>
</div>
</div>
使用了上面公认的答案,但需要做一些修改以使其适合我,如下所示。
主要是处理一些异常,处理半显示的幻灯片和当移动/可见是不同的。
window.addCurrentSlidesClass = function (slider) {
jQuery('.flexslider li').removeClass("active-slide");
// get visible by math rather than slider variable due to half shown slides not counting
// var visible = slider.visible;
var visible = Math.ceil(slider.w / slider.itemT);
var startli = (slider.move * (slider.currentSlide));
// var endli = (slider.move * (slider.currentSlide + 1));
var endli = startli + visible;
// Don't push past when you reach end of list
if(endli > slider.count) {
startli = startli - (endli - slider.count);
endli = endli - (endli - slider.count);
}
for (i = startli + 1; i <= endli; i++) {
jQuery('.flexslider li:nth-child(' + i + ')').addClass('active-slide');
}
};