Jcarousel - display last image first in the infinite loop

假如想象 提交于 2019-12-25 00:24:09

问题


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!


回答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.




回答2:


jCarousel Lite cannot do what you want out of the box.

To make a slideshow with 3 images visible circular, it clones the first 3 and the last 3 images. See default config demo: http://www.gmarwaha.com/jquery/jcarousellite/#demo

This means you'll need to modify the order of the images before you initiate the plugin.



来源:https://stackoverflow.com/questions/7276824/jcarousel-display-last-image-first-in-the-infinite-loop

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!