Actually, this situation arose: I use an adaptive layout, and I was given the task to make a slider.

I chose http://slidesjs.com , hooked up, everything is fine. The page shows 3 frames, each with 4 elements:

alt text

The problem is that at certain resolutions you need to show 3 elements, and for mobile devices 1:
4 elements = 3 frames
3 elements = 4 frames
1 item = 12 frames

By element, I mean:

<ul> <li>Кадр в котором 4 элемента</li> <li>Кадр в котором 4 элемента</li> <li>Кадр в котором 4 элемента</li> <li>Кадр в котором 4 элемента</li> </ul>

For example, for tablets:

 <ul> <li>Кадр в котором 3 элемента</li> <li>Кадр в котором 3 элемента</li> <li>Кадр в котором 3 элемента</li> <li>Кадр в котором 3 элемента</li> <li>Кадр в котором 3 элемента</li> <li>Кадр в котором 1 элемент</li> </ul>

For example, for phones:

 <ul> <li>Кадр в котором 1 элемент</li> <li>Кадр в котором 1 элемент</li> <li>Кадр в котором 1 элемент</li> <li>Кадр в котором 1 элемент</li> <li>Кадр в котором 1 элемент</li> <li>Кадр в котором 1 элемент</li> <li>Кадр в котором 1 элемент</li> <li>Кадр в котором 1 элемент</li> <li>Кадр в котором 1 элемент</li> <li>Кадр в котором 1 элемент</li> <li>Кадр в котором 1 элемент</li> <li>Кадр в котором 1 элемент</li> <li>Кадр в котором 1 элемент</li> <li>Кадр в котором 1 элемент</li> <li>Кадр в котором 1 элемент</li> <li>Кадр в котором 1 элемент</li> </ul>

That is, it should look something like this: alt text

Question: Does anyone have any idea how this can be implemented?

    2 answers 2

    When loading the page, determine the js screen resolution, and depending on it, pass a parameter to the slider - the number of slides in the group

      http://www.owlcarousel.owlgraphic.com/