How to make responsive slider?

Hello!
Puzzled by the layout responsive slider CSS+JS without any third party frameworks.
TK should do so:

- on the resolution for mobile devices are the slides of small size (or some part of the large slide)
with the increasing resolution of a slide is added new elements, images and more text.

Initially used the approach illustrated here: www.internet-technologies.ru/articles/article_2155.html
Ie there is a #wrapper image, container limits the visible area and then it comes in JS:

<div id="contentContainer">
 <div id="wrapper">
 <div id="itemOne" class="content">
</div>
 <div id="itemTwo" class="content">
</div>
 <div id="itemThree" class="content">
</div>
 <div id="itemFour" class="content">
</div>
</div>
</div>
<div id="navLinks">
the <ul>
 <li class="itemLinks" data-pos="0px"></li> <!--For example, the attribute is assigned depending on the width of the slide-->
 <li class="itemLinks" data-pos="-550px"></li>
 <li class="itemLinks" data-pos="-1100px"></li>
 <li class="itemLinks" data-pos="-1650px"></li>
</ul>
</div>


But how to do such a thing adaptive, i.e. how to display different images in the slider (or activate different parts of the slide)? The problem is that according to the technology described in the link above, the coordinates are set to move once attributes of data links. And how to put them in media queries - I don't know.

Or is there a way to intensify the plot of JS code depending on the width of the screen that will allow you to add the desired classes with the images?
August 23rd 19 at 10:41
3 answers
August 23rd 19 at 10:43
what's wrong with bikes? learn - Carmella_Smith commented on August 23rd 19 at 10:46
the fact of the matter is that a simple slider I would have done for a long time, but here the task is a little more interesting: to do to on a mobile display resolution or a piece from a large slide or a separate mini-slide, and in the future this is expanded and there would be additional units, or the big slide.

In addition to the answer to the question, I wonder what approaches are used at all in this case? - Hershel_Wi commented on August 23rd 19 at 10:49
August 23rd 19 at 10:45
Safely dispose of data-pos. And it is better to replace it with the values 1-4. You can record into a variable position = list.offsetWidth is the width of your slide (read More). Here is the magic. For example, clicking on the 3rd button reads all the same data-pos = 3 is reduced by 1 (do not explain it, try it, you'll understand) and multiplied by position . Thus JS-I now do not care what the width of your slides (the main thing is same) and replace the picture no problem.

Put it in the background? Media request and in the prescribed background image smaller. Or size and zoom play, in short, as you wish )
But all this is terribly reminiscent of crutches. If sliders will be several put slick-slider and create. There are loads of settings, and the slider will be possible to twist a touch of a finger on the phone. What is above you and me - not - Carmella_Smith commented on August 23rd 19 at 10:48
August 23rd 19 at 10:47
thanks, I'll try today :)

Find more questions by tags Adaptive designCSSSlider