Jak przenieść element karuzeli na środek, gdy zostanie kliknięty w jquery
Jak sprawić, aby karuzela wyśrodkowała element, który kliknąłem na środku? Szukałem wszędzie odpowiedzi, ale nie są to proste odpowiedzi ... Czy ktoś może mi w tym pomóc?
To właśnie zrobiłem do tej pory:http://jsfiddle.net/sp9Jv/
HTML:
<code><div id="wrapper"> <div id="carousel"> <a href="#" class="prev">prev</a> <a href="#" class="next">next</a> <div class="viewport"> <ul> <li><a href="#">Un</a></li> <li><a href="#">Deux</a></li> <li><a href="#">Trois</a></li> <li><a href="#">Quatre</a></li> <li><a href="#">Cinq</a></li> <li><a href="#">Six</a></li> <li><a href="#">Sept</a></li> <li><a href="#">Huit</a></li> </ul> </div> <!-- viewport --> </div> <!-- carousel --> </div> <!-- wrapper --> </code>
JavaScript:
<code>var carousel = $('#carousel'), prev = carousel.find('.prev'), next = carousel.find('.next'), viewport = carousel.find('.viewport'), item = viewport.find('li'), itemWidth = item.outerWidth(true), itemNum = item.length, itemList = viewport.find('ul'); itemList.width(itemWidth * itemNum); var moveCarousel = function(dir) { itemList.animate({ left: '-=' + (itemWidth * dir) + 'px' }, 400); }; //prev prev.on('click', function(e) { e.preventDefault(); moveCarousel(-1); }); //next next.on('click', function(e) { e.preventDefault(); moveCarousel(1); }); //carousel item item.on('click', 'a', function(e) { var self = $(this), selfIndex = self.index(), distance = itemList.width() / 2, selfPos = self.position(), selfPosLeft = selfPos.left, viewportPosLeft = viewport.position().left; e.preventDefault(); //move item to middle, but it doesn't work... if (selfPosLeft > Math.floor(viewport.width())/3) { itemList.animate({ left: '-' + Math.floor(viewport.width())/3 + 'px' }, 400); } if (selfPosLeft < Math.floor(viewport.width())/3) { itemList.animate({ left: Math.floor(viewport.width())/3 + 'px' }, 400); } }); </code>
CSS:
<code>#wrapper { width: 500px; margin: 20px auto; } #carousel { position: relative; } .viewport { width: 260px; border: 1px solid #6e6e6e; height: 80px; overflow: hidden; position: relative; margin-left: 100px; } .prev, .next { position: absolute; } .prev { top: 20px; left: 0; } .next { top: 20px; right: 0; } .viewport ul { position: absolute; } .viewport li { float: left; margin-right: 10px; } .viewport li a { display: block; width: 80px; height: 80px; background: #ddd; } </code>