Search code examples
javascriptjquerygalleryslideshowcaroufredsel

How to target upcoming slide in Caroufredsel before transition when 3 items are visible

So far I've managed to get caroufredsel to add a class to the active slide, but only after the transition has completed. I can't seem to figure out a way to have it add a class to the slide it's about to transition to.

Here's my working example that selects the active slide after transition: http://codepen.io/rsmm/pen/Iwkeg

And here's my failed attempt at getting it to select the slide it's switching to: http://codepen.io/rsmm/pen/xGmFK

It seems to work at first, but quickly gets out of sync.

Most of the difficulties I'm having seem to be due to the fact that 3 items are showing at the same time. I have yet to find a way to access the index of the slideshow.

The documentation is a bit confusing. They seem to have rebranded their site, and shoved the detailed documentation into a folder and branded it as "old".

In case it helps, here's the most detailed documentation I could find: http://docs.dev7studios.com/caroufredsel-old/configuration.php

Solution

  • Is that what you want? replace:

    onAfter : $highlight,

    with:

    onBefore: $highlight,

    and:

    items.filter(":eq(1)").addClass("active").removeClass("inactive");

    with:

    items.filter(":eq(2)").addClass("active").removeClass("inactive");

    You would also need to add onAfter:someFunc like so:

    pagination: { container: '.carousel-pagination', deviation: 1, onAfter:someFunc //here you would highlight eq(1) }

    and here is the source: http://codepen.io/anon/pen/afHGs