Слайдер с несколькими элементами - PullRequest
Новая
       4

Слайдер с несколькими элементами

0 голосов
/ 23 августа 2010

Я хотел бы создать слайдер, как в этих галереях изображений.
Он должен отображать несколько записей одновременно, как показано на следующем рисунке:

http://i.stack.imgur.com/nTBPw.png (@ILMV извините, мне не разрешается размещать его самостоятельно ..)

Когда я нажимаю стрелку вправо, она должна скользить («как iPhone») влево, так что вы видите 5, 6,7 и 8.
Записи (отображаемые числами) создаются динамически. 

<div>
    <ul>
        <li>1</li>  <!-- ← visible -->
        <li>2</li>  <!-- ← visible -->
        <li>3</li>  <!-- ← visible -->
        <li>4</li>  <!-- ← visible -->
        <li>5</li>  <!-- ← not visible -->
        <li>6</li>  <!-- ← not visible -->
        <li>7</li>  <!-- ← not visible -->
        <li>8</li>  <!-- ← not visible -->
    </ul>
</div>

Я знаю, как работает слайдер, и могу создать его самостоятельно, но не могу понять, каксоздать этот (CSS-) макет ..

Заранее благодарим

РЕДАКТИРОВАТЬ, чтобы прояснить это: заказ актуален, потому что я хотел бы создать «всех наших клиентов»решетчатый вид, отсортированный по заголовкам.

Ответы [ 2 ]

1 голос
/ 31 января 2011

Плагин с несколькими элементами

Обеспечивает простую панель предварительного просмотра элементов списка.Показывает заданный диапазон элементов li из середины (скрывая элементы краев) и позволяет прокручивать список влево и вправо.Не поддерживает автоматическую прокрутку или намотку предметов вокруг.

https://github.com/willrossi/jQuery-Multiple-Elements-Cycle

0 голосов
/ 23 августа 2010

Проблема с вашим вопросом заключается в том, что вы не знаете, нужны ли вам элементы списка в определенном порядке или нет. Конечно, учитывая, что вы уже используете jQuery, нет никаких причин, по которым вы не сможете вставить их так, чтобы это было приемлемо для вас.

В любом случае, я создал что-то простое с float s. Вот простая демонстрация: http://jsfiddle.net/vPGbf/

Суть всего этого (игнорируя действительно причудливый CSS, в котором я застрял) - это действительно простые float ed li, абсолютное позиционирование ol и внешний div с overflow установите значение hidden, чтобы скрыть другие li, которые вам пока не нужны. Это действительно так. Помните, что ширина ol должна увеличиваться при добавлении большего количества элементов, и что для скольжения вы должны изменить значение left для ol.

...