jquery - How to move a Li tag from the first li to the last li to make a slider loop continuously -

jquery - How to move a Li tag from the first li to the last li to make a slider loop continuously -

thanks in advance,

i've managed create slider first have ever made , new jquery of lastly week, bare me.

i'm trying create slider loop first image without shooting first image passing others, instead adding first li tag lastly li tag when ever next arrow pressed adding previous li tags images within end. need work on previous well.

this how far i've got far:

html:

<div class="slider corners"> <ul> <li class="corners"><span class="corners"></span><img src="../images/slider/image_1.png" width="854" height="393" alt="image" /></li> <li class="corners"><span class="corners"></span><img src="../images/slider/image_2.png" width="854" height="393" alt="image" /></li> <li class="corners"><span class="corners"></span><img src="../images/slider/image_3.png" width="854" height="393" alt="image" /></li> </ul> </div> <div id="slider-nav"> <button class="left_arrow" data-dir="prev"></button> <button class="right_arrow" data-dir="next"></button> </div>

jquery:

$(function() { var sliderul = $('div.slider').css('overflow', 'hidden').children('ul'), imgs = sliderul.find('img'), imgwidth = imgs[0].width, imgslen = imgs.length, current = 1, totalimgswidth = imgslen * imgwidth; $('#slider-nav').show().find('button').on('click', function() { var direction = $(this).attr('data-dir'), loc = imgwidth; if ( direction === 'next' ) { $('.slider li').first().insertafter( '.slider li:last'); }else if ( direction === 'prev' ) { $('.slider li:last').insertafter('.slider ul'); } transition(sliderul, loc, direction); }); function transition( container, loc, direction ) { var unit; // -= += if ( direction && loc !== 0 ) { unit = ( direction === 'next' ) ? '-=' : '+='; } container.animate({ 'margin-left': unit ? (unit + loc) : loc }); }

});

was wondering if obvious or if have done wrong.

any help great.

thank you.

several things wrong this:

$('.slider li:last').insertafter('.slider ul');

will set lastly li after ul this:

<ul> <li></li> <li></li> </ul> <li></li> <-- here!

obviously not want, utilize instead:

$('.slider li:last').insertbefore('.slider ul li:first');

your html data-dir values may += , -= instead, can cutting out whole unit thing create easier.

once have moved first or lastly li start/end need resposition ul margin-left: 0; otherwise b

jquery html