Question

[ghost]

Hi Karl,

I am working on a slider that requires that the slides to the left and right of the active slide are both partially visible. I can get a partial slide on the right if I use a fraction for visible - but is there a way to have the slides on both sides of the active slide(s) be partially visible? Thank you.

[kswedberg]

Hi @hmlarson : Yes, there is a way to do this. Probably the easiest way is to make sure that the containing div (the one you call .carouselLite() on) does not have overflow: hidden and then apply your own css accordingly. It's largely a css issue. You can turn off the automatic styling of the carousel completely by setting autoCSS: false.

A long time ago I created this sort of carousel at http://gmb.com. Maybe it'll help give you some ideas. The script is at http://gmb.com/assets/scripts/home.js, and you can inspect the css via the browser's developer tools.

Let me know if this puts you on the right track.

[ghost]

Thank you @kswedberg. That did it! With this, I need to set the two outer slides to a different class to add an overlay effect. Is there a way to target them similar to jcarousel's visible method? Although I have three scrolling at a time, it is only adding the active class to one of those slides.

[kswedberg]

You should be able to do that with either the beforeStart or the afterEnd callback. For example:

$('something').jCarouselLite({
  // ... 
  afterEnd(vis) {
    // first, call removeClass for all of the slides with either of the applied classes
    // ... then ...
    vis.first().addClass('first-visible');
    vis.last()..addClass('last-visible');
  }
});

[kswedberg]

@hmlarson: did my suggestion to use beforeStart or afterEnd work for you? If so, could you please close this issue? Thanks!

[ghost]

Hi Karl,

Thanks very much for checking. I did - but client ended up going with different treatment after all.

On Sun, Jun 29, 2014 at 12:08 PM, Karl Swedberg notifications@github.com wrote:

@hmlarson https://github.com/hmlarson: did my suggestion to use beforeStart or afterEnd work for you? If so, could you please close this issue? Thanks!

— Reply to this email directly or view it on GitHub https://github.com/kswedberg/jquery-carousel-lite/issues/38#issuecomment-47468564 .