How to get my carousel scroll different items at different duration? I have tried playing with this event to no avail.
$('#carousel').triggerHandler('configuration')
e.g. Show slide 1 for 5 second, slide 2 for 10 seconds and so on.
jQuery(".desktop-carouselContainer").carouFredSel({
scroll: {
fx: "crossfade",
onAfter: function (data) {
data.scroll.duration = jQuery("#promo-timer", this).html() * 1000;
}
},
auto: {
progress: {
bar: ".timer",
updater: function (percentage) {
jQuery(this).width(percentage / (jQuery("#promos-container .desktop-carouselContainer li a img").width() / (jQuery(".pagination").width() + 15)) + "%");
jQuery(this).css({ "left": jQuery("#promos-container .desktop-carouselContainer li a img").width() - jQuery(".pagination").width() - 15 });
},
interval: 30
}
},
pagination: {
container: ".pagination",
anchorBuilder: function (nr) {
var src = jQuery(".promo-title", this).html();
return '<div class="pagination-link">' + src + '</div>';
}
},
width: 945,
height: 429
})
Edit: (Solution)
After playing with it for a while, heres how I got it working:
...
auto: {
onAfter: function (data) {
jQuery('.desktop-arouselContainer').triggerHandler('configuration').auto.timeoutDuration = jQuery("#promo-timer", this).html() * 1000;
}
}
...
Heres how I got it working:
...
auto: {
onAfter: function (data) {
jQuery('.desktop-arouselContainer').triggerHandler('configuration').auto.timeoutDuration = jQuery("#promo-timer", this).html() * 1000;
}
}
...