Member Avatar for <M/>
<M/> 170 Why so serious?

I have a slider and for some odd reason after all the images slide across (they slide perfectly at first) they begin to show a little bit of the previous image (this is the second rotation)...

So how do I get it to stop doing that?
Can someone help me with this flaw... I may have to rephrase this, but that's what bugs me...

Here is my jQuery code:

$(window).load(function() {
              var slideContainer = $('#slider_container'), slidesHolder = $(slideContainer).children(), slideWidth = slideContainer.width(), slidePos = 0, slides = $(slidesHolder).children(), slideTotal = slides.length, currentSlide = 0, delay = 3000, slideTime = 700;
              $(slideContainer).css({
                'overflow':'hidden',
                'position': 'relative'
              });
              $(slidesHolder).css({
                'position': 'absolute'
              });
              for (var i = 0; i < slides.length; i++) {
                $(slides[i]).css({
                  'position': 'absolute',
                  'top': '0',
                  'left': slidePos + 'px'
                });
                slidePos = slidePos + slideWidth;
              }
              $(slidesHolder).css('width', slidePos + slideWidth);
              $(slides).first().clone().css({
                'left': slidePos  + 'px'
              }).appendTo(slidesHolder);
              function animate() {
                $(slidesHolder).delay(delay).animate({
                  left: '-=' + slideWidth
                }, slideTime, function() {
                  if (currentSlide < slideTotal - 1) {
                    currentSlide++;
                    animate();
                  } else {
                    $(slidesHolder).css({
                      'left': 0
                    });
                    currentSlide = 0;
                    animate();
                  }
                });
              }
              animate();
            });
  • 1 Contributor
  • 0 Replies
  • 94 Views

Dani AI

Generated

This looks like the classic wrap-around seam you get when the slider resets to the cloned first slide. For , the fix is usually one (or a combination) of three practical steps: make the slide width an exact integer, force the browser to render whole-pixel positions during animation, and make sure the cloned slide and container widths are calculated with the same rounded values.

Try these checks and fixes in order:

  • Measure and use an integer width for each slide (round the computed width) so sub-pixel values do not accumulate across animations.
  • During the jQuery animate, snap the left value to an integer in the animation step callback to prevent fractional pixels from showing a thin seam.
  • Ensure images are block-level with no extra margins/borders affecting widths, and recalc sizes on window resize if the layout is responsive.

A minimal example of the two technical changes (rounding the slide width and forcing integer left values during animation) looks like this:

var slideWidth = Math.round($('#slider_container').width());

$(slidesHolder).animate(
  { left: '-=' + slideWidth },
  {
    duration: slideTime,
    step: function(now){ $(this).css('left', Math.round(now) + 'px'); }
  }
);

Notes and tests: temporarily add visible outlines to each slide to watch how positions change during the last wrap. If the seam only appears on high-DPI devices, check devicePixelRatio and try transform: translateZ(0) as a rendering tweak (it can help but may introduce its own artifacts). If the site is responsive, recalc everything on resize or when images finish loading; otherwise the first rotation may look fine and later ones shift as layout stabilizes.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.