Real mobile first slider – any suggestions?

[Emil]

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.

[Alen]

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 rightergroup.com, 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.
http://scottjehl.github.io/picturefill/

Hope that helps.
-Alen

[Emil]

Thanks Alen,
matchMedia is unfortunately not compatible with IE9 and IE mobile. As an alternative I could try Modernizr.mq().
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,
Emil

[Author]

Posts