Собственно, возникла такая ситуация: я использую адаптивную верстку, и мне поставили задачу сделать слайдер.
Я выбрал http://slidesjs.com, подключил, все хорошо. На странице показывается 3 кадра, в каждом по 4 элемента:
Проблема состоит в том, что на определенных разрешениях нужно показывать 3 элемента, а для мобильных девайсов 1:
4 элемента = 3 кадра
3 элемента = 4 кадра
1 элемент = 12 кадров
Под элементом я имею в виду:
<ul>
<li>Кадр в котором 4 элемента</li>
<li>Кадр в котором 4 элемента</li>
<li>Кадр в котором 4 элемента</li>
<li>Кадр в котором 4 элемента</li>
</ul>
К примеру, для планшетов:
<ul>
<li>Кадр в котором 3 элемента</li>
<li>Кадр в котором 3 элемента</li>
<li>Кадр в котором 3 элемента</li>
<li>Кадр в котором 3 элемента</li>
<li>Кадр в котором 3 элемента</li>
<li>Кадр в котором 1 элемент</li>
</ul>
К примеру, для для телефонов:
<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>
То есть выглядеть должно примерно вот так:
Вопрос: есть ли у кого идеи, как можно такое реализовать?