Geek Answers Handbook

Scrolling, carousel, slider in jquery without any plugin - the easiest way

I am looking for a tutorial on jQuery slider (e.g. scrollable plugin) with loop animation. Without any plugin, the easiest way, tutorial

+4
jquery cycle slider
source share
2 answers

UPDATED: 08/27/2014

$(function() { /* author: Luca Filosofi * contact: aseptik@gmail.com * http://devilmaycode.it * license: Public * Updated: 27/08/2014 */ var animating = false, iXS = 3, $slider = $('.panel-inner'), liW = $slider.find('li:first').width(), liFW = (liW * $slider.find('li').length); $slider.width(liFW); $('.button a').on('click', function(e) { e.preventDefault(); if(!animating){ var left = Math.abs(parseInt($slider.css('left'))); var side = ($(this).data('direction') == 'right') ? (((left + (liW * iXS)) >= liFW) ? 0 : -(left + liW)) : ((left > 0) ? -(left - liW) : -(liFW - (liW * iXS))); rotate(side); } }); var rotate = function(leftY) { if(!animating){ animating = true; $slider.stop(true, true).animate({left : leftY}, 500, function(){animating = false;}); } } });
+4
source share

I am writing code:

  <script type="text/javascript"> $(document).ready(function() { $('a.next').click(function() { var duplicate = $('#a li:first').clone(); // $(duplicate).appendTo('#a ul'); $('#a ul').animate({ marginLeft: '-=52px' }, 2000, 'linear', function() { $('#a li:first').remove(); }); }); }); </script> <style type="text/css"> #a { list-style: none; width: 52px; height: 50px; border: 1px solid blue; margin-left: 200px; } #a ul { margin: 0; margin-left: -104px; padding: 0; width: 420px; border: 1px solid green; height: 50px; position: absolute; } #a ul li { border: 1px solid red; float: left; width: 50px; text-align: center; } .services { border: 1px solid green; padding: 5px; width: 300px; margin-left: 100px; display: none; }</style> <a href="#" class="next">next</a> <div id="a"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> </ul> </div>

... but when I delete the first element, the elements move to the left after the animation, and when I click "next" several times, the element will be outside the blue container.

0
source share

More articles:


All Articles