carouFredSel将类别添加到活动幻灯片 [英] carouFredSel add class to active slide

问题描述

我正在尝试在carouFredSel的当前幻灯片中添加一类活动"，但是我无法使其正常工作.我可以使用的最接近的方法是使用trigger("currentVisible")将其添加到第一张幻灯片中，但不会更新.

I'm trying to add a class of "active" to the current slide in carouFredSel, and I can't get it to work. The closest I could get it to work was to add it on the first slide, using trigger("currentVisible"), but it doesn't update.

帮助！谢谢:)

推荐答案

到目前为止，我使用了此功能(尽管该功能在页面加载时不起作用，并且似乎为该简单任务提供了大量代码) 也许有人对如何简化它并使它在页面加载中起作用有了想法

So far, I used this function ( it doesn't work on page load though and it seems to be a lot of code for that simple task) Maybe someone has an idea how to simplify this and also make it work on page load

function highlight( items ) {
items.filter(":eq(1)").addClass("active");
}
function unhighlight( items ) {
items.removeClass("active");
}

$('#foo').carouFredSel({
scroll : {
onBefore: function( data ) {
  unhighlight( data.items.old );
},
onAfter : function( data ) {
  highlight( data.items.visible );
}
},
});

这是一个应该在页面加载和滚动中正常运行的更新: 此处是有关触发事件的更多详细信息.

Here's an update that should work fine on page load and scroll: Here are more details about the trigger event.

var $highlight = function() { 
    var $this = $("#foo");

    var items = $this.triggerHandler("currentVisible");     //get all visible items
    $this.children().removeClass("active");                 // remove all .active classes
    items.filter(":eq(1)").addClass("active");              // add .active class to n-th item
};


$('#foo').carouFredSel({

    scroll : {
        onAfter : $highlight
    },      
    onCreate    : $highlight

});

这篇关于carouFredSel将类别添加到活动幻灯片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！