Responsive slider

I would like to make a suggestion for this awesome theme…!

Could you add an option to disable the slider on mobile devices or small screens?
Slider images are big and I wouldn’t want them to download over a most-likely slower connection.

Best would be to load and unload flexslider when media sizes matches certain criteria, just like the menu changing to a hamburger menu when I resize my browser window. But I don’t know if flexslider supports unloading. If it does, Enquire.js might help to do it right.

Thanks!

You can simply add this to Theme Options - Other - Custom CSS. This will get rid of flexslider on mobile devices but by using this method scripts will be still loaded but since images are much larger than scripts it shouldn’t be a huge issues.

@media (max-width: 768px) {
  .flexslider {
    display: none;
  }
}

To avoid loading scripts it will be much more difficult and might require some specific PHp modules. Personally I have never done that myself but it is definitely something that can be done.

Thanks for responding. Yes scripts are still loading, but display:none normally doesn’t stop images from loading either. If flexslider continues to operate, it would still load images, which is the whole point.
I will try, see what happens and get back here :wink:

As I expected, while display was set to none, all images keep loading. So this is only a visual solution unfortunately

Getting rid of Flexslider CSS and JavaScript would make no effect either as images are printed in source by PHP and then they are manipulated by JavaScript and CSS. So you need to look into some sort of PHP solution to prevent images from loading in the first place.

Hmm you are right. I will think about a solution. Only if I disable the slider in the theme options, the images don’t get loaded. Which runs into a js-bug actually :wink: in window.load there’s an unconditional statement that animates flexslider even if it’s switched off: $(’.flexslider’).flexslider({animation:“fade”})
Which should be surrounded by if ($(’.flexslider’).length) I think