Is it possible to dynamically set the timeout in jcarousellite?
-
31-05-2021 - |
Question
I'd like to set two timers in the jcarouselLITE (take note - not jcarousel). Ideally the first three slides should have timeout:1000, and the forth should have timeout:8000. The following code grabs the index of the current slider and changes the var variablex
accordingly with the afterEnd
function:
var variablex;
$('.slideshow').jCarouselLite({
auto: true,
afterEnd: function(a){
var index = $(a[0]).index();
if (index == 3) {
variablex = 8000;
}
else {variablex = 1000;}
},
timeout: variablex;
});
I realise that the jCarouselLite function won't keep checking the value for timeout
- is there some way to assign values to a variable outside the loop with js?
The jcarousellite script can be found here: github
Solution
This is just a raw idea, so it might not work as desired.
var slideshowTimeout = 1000;
var $slideShow = $('.slideshow');
var slideshowCount = $slideShow.find('li').length +3;
var isSlowedDown = false;
$slideShow.jCarouselLite({
auto: true,
timeout: slideshowTimeout,
afterEnd: function(a){
var index = $(a[0]).index();
if (index === slideshowCount && isSlowedDown === false) {
slideshowTimeout = 4000;
isSlowedDown = true;
$slideShow.trigger("endCarousel")
$slideShow.jCarouselLite({
auto: true,
timeout: slideshowTimeout,
start: slideshowCount
});
}
},
});
Example: http://jsfiddle.net/e2e4V/1/
OTHER TIPS
There is no timeout option in jCarousel, it's auto the equivalent. Then you can access created jcarousel element after they are initialize
jQuery('#mycarousel').data('jcarousel')
That will return the instance object for your current carousel, you should be able to change options on the fly by accessing the options object via jQuery('#mycarousel').data('jcarousel').options
, so you can change the auto option by doing something like
jQuery('#mycarousel').data('jcarousel').options.auto = 5;