Setting active image in carousel

[former_member187069]

Hi All,

I have a carousel in my View like below  and I have 4 images to be displayed in the carousel and have each of them as html divs.

I am able to set the images for the carousel dynamically by getting the ids of the html and doing a htmlid.innerhtml =. This works fine.

Now I need to set the active page as image2. I tried using carouselId.setActivePage("img2"). But this didnt work. Any help? Thanks

<Carousel id="carouselId" >

  <pages>

  <html:div id="img1"></html:div>

  <html:div id="img2"> </html:div>

  <html:div id="img3"></html:div>

  <html:div id="img4"></html:div>

  </pages>

  </Carousel>

Thanks

[Former Member]

It maybe due to the reason that xml views generates id's prefixed with the root controls. As an alternative of going with id's, you can retrieve the instance of the appropriate control you want to set as ActivePage. To set the img2 as ActivePage you can do,

var page2 = carousel.getPages()[1];

carousel.setActivePage(page2);

[former_member187069]

Hi,

Thanks. This works. I too tried with previous() and next() methods and got that working..

But have a small issue here in both the cases..The current page is set correctly but in the UI, the image is not changing..but I can see the Page indicator placement changing. If I minimise or maximise the page or do an Inspect element on the page, then it gets refreshed. Not sure why?

Any clue here? Thanks

[former_member187069]

Hi , I tired couple of things..but still no luck. Is there any way we could refresh the caraousel?

[Former Member]

can you create a snippet in jsbin.com of what you've tried. I'll try to correct those.