1

Собственно, возникла такая ситуация: я использую адаптивную верстку, и мне поставили задачу сделать слайдер.

Я выбрал http://slidesjs.com, подключил, все хорошо. На странице показывается 3 кадра, в каждом по 4 элемента:

alt text

Проблема состоит в том, что на определенных разрешениях нужно показывать 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>

То есть выглядеть должно примерно вот так: alt text

Вопрос: есть ли у кого идеи, как можно такое реализовать?

2 ответа 2

2

При загрузке страницы определять js разрешение экрана, и в зависимости от него передавать слайдеру параметр - число слайдов в группе

1

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.