Основа 4 и настройка орбит

Есть ли какой-либо метод, позволяющий изменить структуру списка при изменении размера окна?Основа 4 и настройка орбит

Это моя по умолчанию разметки, который показывает 4 пунктов на разрешение по умолчанию (980px):

<ul data-orbit data-options="bullets:false; container_class:'rafting-cont'">  
    <li> 
    <div>…</div> 
    <div>…</div> 
    <div>…</div> 
    <div>…</div> 
    </li> 
</ul>

, но я хочу, чтобы изменить его, чтобы иметь только два резолюций меньше 768px. Разметка должна динамически изменяться в:

<ul data-orbit data-options="bullets:false; container_class:'rafting-cont'"> 
    <li> 
    <div>…</div> 
    <div>…</div> 
    </li> 
    <li> 
    <div>…</div> 
    <div>…</div> 
    </li> 
</ul>

Я пытался сделать это с помощью JQuery развёртки и функции обертки, но он не работает, так как основа и орбита уже инициализирована.

Любые идеи, как я мог это сделать?

источник

2013-05-07 bigcat

Что вы пытаетесь достичь здесь? Вы хотите разбить орбиту на две орбиты? Или вы хотите скрыть некоторые слайды на меньшем экране? Разделение неупорядоченного списка на два не имеет смысла. –

Нет, я не хочу их разбить. Я хочу показать 2 вместо 4 элементов на меньших экранах. Извините, если вопрос вас смутил. На больших экранах показаны 4 элемента. Когда запускается next/prev, отображается еще одна группа из 4. на маленьких экранах я хочу иметь группы по 2 на 2, поэтому слайдер будет действовать как карусель. – bigcat

Вы используете классы .hide-for-small и .show-for-small?

<ul> 

    <li> 
     <div> item 1 </div> 
     <div> item 2 </div> 
     <div class="hide-for-small"> item 3 </div> 
     <div class="hide-for-small"> item 4 </div> 
    </li><!-- end slide-1-a--> 

    <li class="show-for-small"> 
     <div> item 3 </div> 
     <div> item 4 </div> 
    </li><!-- end slide-1-b--> 

</ul>

источник

2013-06-23 21:24:54

Основа 4 и настройка орбит

ответ

Смежные вопросы