render html depending on resolution

Question

I'm actually developing a website. I have an image slider in desktop view like the example below.

<ul>
  <li><src="image_1.jpg" alt=""></li>
  <li><src="image_2.jpg" alt=""></li>
  <li><src="image_3.jpg" alt=""></li>
</ul>

But in mobile view, i wanna display an image instead of the slider.

<img src="image_4.jpg" alt="">

I know, the simplest solution is to hidden die slider in mobile view by css. But the HTTP requests of the slider images still exists. But I don't want them. :) I need a possibility to render difficult mark up, depending on resolution/viewport.

Whats the best solution? jQuery Script? Web Components/MVC Frameworks? I don't know. I am grateful for any suggestions! :)

Answer 1

You can use a condition by checking is user agent mobile or not and then initialize slider or paste image instead of the slider.

This solution can be used for mobile browser detection: Detecting a mobile browser

Then use code something like that

...
mobilecheck && $('.sexyslider').initiate({lovely: 'options'});
...

PS && - is short notation of ' if ' statement. It is the same as if (mobilecheck) {...}

Actually if you want to render page in different way, depending of screen resolution - you better use

CSS Media queries

for that.