Carousel not advancing until the third click, but does go to previous slide

[vomc]

Hi,

I am running into a strange error with jCarousel. Not sure what I did but I had this working and now it seems that my carousel is only able to go back (i.e. using scroll: -=1). The element that I wired into doing scroll +=1 does not cause the carousel to respond until you click on it 3 times...

I set up a fairly isolated case here:

http://c4sr.spatialinformationdesignlab.org/node/261

The triggering logic is handled by jQuery which is set up as follows:

// after document.ready
$('.jcarousel11').jcarousel({ wrap: 'circular', auto: 1, rtl: false, scroll: 1, 
  animation: carousel_speed, easing: carousel_easing
});

// this does not work...
$('#hp-carousel-projects-large-next').click(function() {
  console.log("CLICK on advance jcarousel11!");
  $('.jcarousel11').jcarousel('scroll', '+=1');
});

// this does work...
$('#hp-carousel-projects-large-prev').click(function() {
  $('.jcarousel11').jcarousel('scroll', '-=1');
});

Not sure - could be a number of things interfering but there are no errors on the console... so I am a bit stumped - especially because I had this working before...

Feel free to archive this request if its too tricky to solve but any advice would be greatly appreciated!

Thanks

• V

[jsor]

I guess the problem is, that you're rendering the carousel with Angular. You might be initializing jCarousel too early, before it's fully rendered by Angular.

If i run $('.jcarousel11').jcarousel('reload'); via the console after page load, it is working correctly. A quick fix might be

$(window).load(function() {
     $('.jcarousel11').jcarousel('reload');
});

The correct way would be to hook into Angular and initilaize the carousel after the html is fully rendered (sorry, i'm not familiar with Angular, nit sure if such a hook exists).

[vomc]

Thanks! Yeah, I suspected that it has something to do with angular. Sorry for not pointing that out earlier...

I rewrote the logic to pull the images from the CMS in PHP and it works fine now... so it must be somewhere in angular, especially since it did work before at some point. Going to research this a bit more Thank you!

• J