Home/ Questions/Q 8175505
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-06T22:48:24+00:00

I am creating my own carousel slideshow for images, using Jquery. Currently i have

  • 0

I am creating my own carousel slideshow for images, using Jquery.
Currently i have a div which act as viewport with overflow: invisible; and inside i have a veeery long div with all the different images one next to each other.

This mean that the div could be several thousands pixel wide. I am wondering what if this can be a problem.

I thought to load all the images indipendently and moving them only when needed rather than moving the whole set of slides.

What do you think is a good solution to implement for high performance and lightness?

Thanks

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    On certain devices scrolling long bitmaps or layers can cause a visual tearing affect, if I was to start a project like this myself – it is more tricky to accomplish – but far better to use separately controlled divs.

    Depending on what you are trying to achieve you normally only have to use two divs (possibly three) that you control independently. All you need to is keep loading the next image in to the div that is “hidden” outside of your viewport and then slide it in to place whilst you slide off the currently visible one.

    The above is a better method from a point of view of optimisation and also flexibility on the kinds of transitional effects you can acheive (i.e. slides or fades and so on). I’d also recommend you either store your list of images as a JS Array (and preload each image before inserting it to the HTML Dom) or as a HTML/LI list on images (which will already be preloaded by the browser).

    A good example of this is the following:

    http://jquery.malsup.com/cycle/

    • 0