Clonage des éléments li dans JQuery

Question

J'utilise EasySlider, mais contrairement à tous les exemples de ce plugin que j'ai trouvé, je montre plusieurs éléments à la fois et la largeur est de 100%. Les images séparées forment une image complète, longue et consécutive, qui est modifiée de façon à ce que même la limite entre le premier et le dernier aspect soit naturelle. Il est configuré pour être une diapositive continue automatiquement.

Dans le plugin il y a ce 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); 
};    

Mon problème est que seul le premier élément est cloné après le dernier, donc lors de la deuxième rotation de ce curseur, seulement montre le premier élément, jusqu'à ce qu'il arrive à l'extrême gauche, alors les autres images semblent "pop" po (similaire: [EXAMPLE] si vous imaginez et toutes les images à droite du champ de foire n'apparaissant que lorsque le champ de foire arrive à l'extrême gauche).

Existe-t-il une meilleure façon de gérer ce clonage d'éléments afin que TOUTES les images soient clonées? ou peut-être quelqu'un peut penser à un meilleur moyen? Je suis nouveau à JQuery

REMARQUE: J'essaie de créer une opération qui permet à un élément de quitter l'écran de gauche pour revenir à droite. Y a-t-il un moyen d'y parvenir finalement?

Answer 1

Je pense que vous pouvez envisager un autre plugin. Si vous modifiez le plugin, la mise à jour nécessitera la réapplication de vos patchs.

Je recommande http://www.gmarwaha.com/jquery/jcarousellite/ ou http://sorgalla.com/jcarousel/

Ces deux appuient ce que vous parlez.

Answer 2

ne sais pas, si j'Unterstand la bonne façon, vous pouvez essayer ceci:

//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 3

Je suis d'accord avec troynt, dans ce cas, il serait préférable d'utiliser quelque chose qui répond à vos besoins.

Je viens de faire un simple "plugin" ce qui ne fait que ce dont vous avez besoin, peut-être que c'est utile pour vous.

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

Vous pouvez délai d'installation et de la durée et choisissez de faire une pause sur le vol stationnaire.

Answer 4

Étant donné que vous avez une liste d'articles dans votre barre de défilement comme ceci:

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

Et en supposant que chaque fois que vous avancez la barre de défilement, le premier plus li se déplace hors de l'écran, vous pouvez plumer en continu la première li sur le devant de la liste et l'ajouter à la fin à chaque clic d'un bouton "suivant" ou un événement de défilement. Si vous utilisez jQuery> = 1.4, vous pouvez le faire en utilisant la méthode detach(), qui supprimera l'élément du DOM, mais conserver toutes ses données associées afin que vous puissiez facilement réattacher plus tard:

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