Cloning li elements in JQuery

Question

I'm using EasySlider, but unlike any of the examples of this plugin that I've found, I show multiple elements at any one time and the width is 100%. The separate images make up a full, long consecutive image, which is Photoshopped so even the borderline between first and last looks natural. It's configured to be a continuous slide automatically.

In the plugin there is this code:

if(options.continuous){
    $("ul", obj).prepend($("ul li:last-child", obj).clone().css("margin-left","-"+ w +"px"));
    $("ul", obj).append($("ul li:nth-child(2)", obj).clone());
    $("ul", obj).css('width',(s+1)*w);
};              

My issue is that only the first element is cloned after the last one, so upon the second rotation of this slider, only the first element is shown, until it gets to the far left, then the other images appear to "pop" in. (similar: [EXAMPLE] if you imagine and all images to the right of the fairground not appearing until the fairground gets to the far left).

Is there any better way to manage this cloning of elements so that ALL the images are cloned? or perhaps someone can think of a better way? I'm new to JQuery

NOTE: I'm trying to create an operation whereby as an element leaves the screen on the left, it is placed back onto the right. Is there a way to ultimately achieve this?

Answer 1

Dont know, if I unterstand it the right way, you may try this:

  //at first run add a class "init" to the inital li-elements,
  //so that later only them will be cloned 
if(!$('ul li.init',obj).length)$('ul li',obj).addClass('init');

  //prepend clones of all li-elements with init-class and remove their init-class
$("ul", obj).prepend($("ul li.init", obj).clone().removeClass('init').css({}));

Answer 2

I think you may want to consider a different plugin. If you change the plugin, updating will require reapplying your patches.

I'd recommend http://www.gmarwaha.com/jquery/jcarousellite/ or http://sorgalla.com/jcarousel/

These both support what you are talking about.

Answer 3

I agree with troynt, in this case it would be better to use something that meets your requirements.

I just made a simple "plugin" what only does, what you need, maybe it's useful to you.

http://jsfiddle.net/doktormolle/4c5tt/

You can setup delay and duration and choose to pause on hover.

Answer 4

Given you have a list of items in your scroller like this:

<ul>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
</ul>

And assuming that every time you advance the scroller, the first-most li moves off screen, you can continuously pluck the first li off the front of the list and append it back to the end on each click of a "next" button or scroll event. If you're using jQuery >= 1.4, you can do this by using the detach() method, which will remove the element from the DOM but keep all its associated data so you can easily reattach it later:

$('ul li:first').detach().appendTo('ul');