0

I have a carousel which uses the jCarouselLite script, the carousel is used as a sub menu on a page.

Now after clicking a element from the carousel the li gets an class of active the're 4 visible elements.

I wan't to be able to scroll to the active element on page load so it is visible to the user.

I tried the btnGo option but the number of items can change (as in a menu), and with triggering the click event a number of times on the next button as shown below, but the event can be triggered once after that it dosn't work.

  $('.slideshow').jCarouselLite({
      btnNext: "#next",
      btnPrev: "#prev",
      visible:4,
      circular: false,
      mouseWheel: true,
      btnGo:[".slideshow li.active"]
   });

    //scroll to active element
    var activePosition = $('.slideshow ul li.active').position();
    if (activePosition != null) {
    var index = $('.slideshow ul li.active').index();

    for (var i = index-4; i >= 0; i--) {
      $('#next').trigger('click').delay( 800 );
     }
    };

Can this be done in any way??

adam
  • 618
  • 2
  • 11
  • 31

1 Answers1

0

To solve this a actually replaced the lite version with jCarousel which has a built in function to go to position (index) of the carousel example shown below.

var activePosition = $('.slideshow ul li.active').position();
  if (activePosition != null) {
    var index = $('.slideshow ul li.active').index();
    $('.slideshow').jcarousel('scroll',index);
  };
adam
  • 618
  • 2
  • 11
  • 31