Member Avatar for <M/>

Does anyone know how to make a left to right image sliders.... You know... those that slide left to right...!
Thanks!

  • 4 Contributors
  • 5 Replies
  • 1K Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by <M/>

Dani AI

Generated

Nice work @M — sharing the working slider is exactly what helps others here (and answers 's jQuery question). A few practical, modern improvements that avoid common problems and make the component more robust:

Animate transforms, not left/top. Use transform: translateX(...) (or translate3d) or requestAnimationFrame-driven updates so the GPU can handle the motion and you avoid layout thrash. Apply will-change: transform only while animating and remove it afterwards to reduce memory pressure. Initialize measurements only after images have loaded (or use explicit width/height attributes) and recalc on resize so positions stay correct on responsive layouts.

Make it accessible. Add a visible pause/play control, stop automatic sliding on hover and focus, and add keyboard support (ArrowLeft/ArrowRight). Announce slide changes to assistive tech (e.g., brief update via aria-live="polite") and include meaningful alt text for images. Honor prefers-reduced-motion to disable autoplay for users who request reduced motion.

Improve performance and UX: use native lazy loading (loading="lazy") with an IntersectionObserver fallback, serve responsive images with srcset/sizes, and consider CSS Scroll Snap or a CSS-only radio-input slider for simpler use-cases. Troubleshooting checklist: check for forced reflows in the animation loop, test with DevTools performance throttling, ensure overflow:hidden on the container, and set image dimensions to prevent layout shift. If something still stutters, post a minimal demo and the browser/device used so others can reproduce and suggest fixes.

Recommended Answers

All 5 Replies

Member Avatar for <M/>

I have officialy been dumbfounded...

Member Avatar for JorgeM

Wow, I clicked on the google search link above and this thread came out first on the list of the results. I'm in an endless loop here...

Member Avatar for Dani

Sorry mSedique ...

What do you mean image slider?? Also, are you familiar with jQuery and/or would you be willing to include the jQuery javascript library?

Member Avatar for <M/>

hehe, i actually figured it out, I'll paste my slider's 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();
});

Thanks you guys for trying to help me out!

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.