1

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! :)

laaposto
  • 11,835
  • 15
  • 54
  • 71
user2260090
  • 11
  • 1
  • 1
    This question is very broad.. have you tried an approach yet? You could easily google this and get started in order to get back to Stackoverflow with a more specific problem. – urbz May 05 '14 at 13:47
  • the general approach of what you are trying to do is wrong. responsive design is not about differentiating the user experience and the content based on the device. you should serve the same website and experience to every device. – valerio0999 May 05 '14 at 14:05

1 Answers1

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'});
...

P.S. && - 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.

Community
  • 1
  • 1
Steve Reichbach
  • 98
  • 1
  • 9