The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Real mobile first slider – any suggestions?

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #169102

    Hi there,

    I just came to realize that all those ‘responsive’ sliders out there only handle one image version, and that’s the large one. With full page width images this is a problem – in my case three images add up to about 450k, not exactly a mobile friendly number.
    Has anyone here come across a slider that can serve several image sizes based on the viewport or device width? Or maybe succeeded with utilizing Modernizr, ryanve/response.js, …?
    Sorry for throwing this out here without doing some testing myself, but I have close to no time to work on this. Any pointing into the right direction is very much welcome.

    Oh yes – and I am using Bootstrap in case that’s important.


    Mobile First encapsulates a lot. Some of it technical, but most of it, at least I like to think of it that way, is a methodology.

    So from that perspective it’s all about how you approach the problem. When I built, I decided to completely eliminate sliders from mobile view, since they don’t add anything important. Only when I have enough real estate, I load the sliders… using matchMedia.

    It all really depends on what exactly you’re after.

    Picturefill is another great poly-fill that serves its purpose.

    Hope that helps.


    Thanks Alen,
    matchMedia is unfortunately not compatible with IE9 and IE mobile. As an alternative I could try
    Picturefill looks promising though, I’ll have a look if it solves the problem.
    Removing the slider for mobile is not an option in my case, but I agree that they take away valuable space on tiny screens.

    Have a good weekend,

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.