Forum | Appery.io

Hi Support,

i am trying to jump to a specific index within a carousel.
First i have to find the index by finding a specific data-title inside the carousel, than jump to the carousel page where the title is located.
my code:

carousel = Appery('getijdencarousel');
console.log(carousel);
index = $(carousel).find("div[data-title='2013-11-05']").attr("_idx");
carousel.carouselRoot.to({'index': index});
console.log(index);

However, the index is undefined and the 'to' method not recognised

Can you help me in the right direction?

Hi Douwe,

Try the following:precarousel = Appery('getijdencarousel');
index = $(carousel.carouselRoot).find("div[title='2013-11-05']").attr("id");
index = index.replace(/\d-/,"") - 1;

carousel.carouselRoot.carousel("to",index);/pre

Just to add. It's better not to use title for Carousel navigation. It's better to use the following: prevar newitem = Appery("mobilecarouselitem");
carousel.carouselRoot.carousel("slide", false, newitem );/preWhere 'mobilecarouselitem' is a name of item you want to navigate to.

Hi Katya,

i used the following code behind a button click event:

carousel = Appery('getijdencarousel');
carousel.carouselRoot.carousel("refresh");
var gotoItem = $(carousel.carouselRoot).find(".getijdenpanel").has("div.datum:contains('2013-11-05')");
carousel.carouselRoot.carousel("slide",false,gotoItem);

and after clicking the button, the carousel slides to the exact slide.
How can i run this code at pageshow; it seems the carousel is built after the pageshow event. I am using a service to populate the carousel also on pageshow

Hi Douwe,

Try the following:prevar carousel = Appery("mobilecarousel");
var newitem = Appery("mobilecarouselitem");
carousel.carouselRoot.carousel("slide", false, newitem );/pre

i have got it working, thanks

Hey,
i have a similar problem. Your code helps me but i have no event to trigger it. The "load" event is to early because the carousel does not exists yet and i cannot select the "Ready" event from the Carousel in your admin panel.

What event would you recomment to tell the carousel to start at item number 3.

Thanks and greetings
Leo

Hey,
i have a similar problem. Your code helps me but i have no event to trigger it. The "load" event is to early because the carousel does not exists yet and i cannot select the "Ready" event from the Carousel in your admin panel.

What event would you recomment to tell the carousel to start at item number 3.

Thanks and greetings
Leo

Hi Leo,

Please use Page Show event.

Hey,
thanks for your response, sadly it does not work. During the "Page Show" event i can get the carousel via

codevar carousel = Appery("carousel");/code

but i cannot call methods on it. For example

codecarousel.carouselRoot.carousel('to', myitem);/code

would result in the following error message:

[quote:]Error: cannot call methods on carousel prior to initialization; attempted to call method 'refresh'.[/quote]

Any ideas?
Thanks and greetings
Leo