Question

I’m wondering if anyone using Jcarousel would have a suggestion on how to clone or display the very last image of the carousel as the first image.

Example of 5 photos where the carousel shows 3 images it currently looks like this:

1 – 2 – 3 (4 and 5 are waiting to be shown)

Instead, here is what I am trying to achieve on load:

5 – 1 – 2 (3 and 4 are waiting to be shown)

What I am using at the moment is the following settings:

wrap: ‘circular’,
scroll: 1,
auto: 1,

I have tried an offset: -1 but this shows a blank and does not work.

I have also tried an offset to start the carousel with the last image – however, with wrap set to ‘circular’ this also does not work and makes other images blank until you manually load them.

I have done my best to look for an answer on my own but would appreciate your help, thanks in advance.

EDIT: I’m also open to suggestions of a different script that can do this – thanks!

EDIT #2: Thank you first of all to those commenting. Further research: I have found this site (www.anothermag.com) does a fine job of showing the last image first which I believe is using Jquery SerialScroll based on the code. I have yet to try this but does seem very promising. Another idea I have is to see if I can make the last image show as the first in the WordPress Loop so that it still uses Jcarousel but hardcodes the last image. Will post more updates.

EDIT #3: final solution:

I have chosen the answer below by Sparky672 since I think it’s safe to say Jcarousel as of today is not capable of doing this without intervening with rearranging images before it loads.

However, in case anyone is interested in an option/alternative, I will be using Fred HQ’s excellent script “Roundabout”. The example I will be using is here: http://fredhq.com/projects/roundabout/demo/around

With a few small modifications, it will do exactly what I need without much work in the loading part.

The settings would be to set opacity to 1 for all images, set tilt to 0, add auto-scroll in set interval, set size of the boxes to same size.

This particular carousel requires a white divider so I will be using the “Moving things around things” example to make the “thing” in the middle a white box to hide what is being looped behind.

I hope this helps someone.

Thanks again!

Answer 1

You’re seeing these blank images because you’re using a broken option. jCarousel is a great script but even the developer acknowledges that wrap:circular is not working. The developer’s own demo shows the circular wrap issue (depends on the browser). He’s been talking about fixing it for several months now. I still use the plugin but I just don’t use wrap:circular option.

EDIT: I’m also open to suggestions of a different script that can do
this – thanks!

You can try jCarousel Lite as an alternative. I’ve used jCarousel Lite when I wanted a circular wrap.