Пустить блоки по 2 зигзагом ?

[ilyas]

Как пустить блоки на css вот так по 2 штуки, в блоке всегда отображаются только 4 блока 2х2

3 и 4 блок должны перенестись на строку ниже, 5 и 4 должны подняться на уровень с 1 и 2 вот такой зигзаг получается, можете подсказать?

Разметка вот такой будет

<div class="slider">
	  <div></div>
	  <div></div>
	  <div></div>
	  <div></div>
	  <div></div>
	  <div></div>
</div>

Edited August 16, 2013 by ilyas

[CoDy]

Поскольку это слайдер, без JS тут скорее всего никак. Так зачем на CSS что-то придумывать. Можно просто на на CSS сделать "окошко" на 4 элемента а при помощи JS скрывать все, чего видно не должно быть. Вот так например: http://jsfiddle.net/3Ch6a/1/. В верстке я не силен, поэтому за нее не ругайте, главное суть, думаю, будет понятна.

Edited August 16, 2013 by CoDy

[user]

Возможно,это вам поможет.

http://htmlbook.ru/css/nth-child

[ilyas]

Ваш скрипт почти то что мне нужно, вот только почему после последнего блока опять первые блоки не повторяются? и нет анимации

[CoDy]

Ваш скрипт почти то что мне нужно, вот только почему после последнего блока опять первые блоки не повторяются? и нет анимации

Ну дело в том, что это так, просто на скорую руку было набросано, для демонстрации самой идеи. Написать полнофункциональный слайдер, думаю, тустая трата времени, ибо их готовых более чем достаточно. Воn http://jsfiddle.net/3Ch6a/2/ подправил листалку(зациклил) и там есть функция(init()), которая выстроит элементы так, как описано в первом посте.

[ilyas]

Ваш скрипт почти то что мне нужно, вот только почему после последнего блока опять первые блоки не повторяются? и нет анимации

Ну дело в том, что это так, просто на скорую руку было набросано, для демонстрации самой идеи. Написать полнофункциональный слайдер, думаю, тустая трата времени, ибо их готовых более чем достаточно. Воn http://jsfiddle.net/3Ch6a/2/ подправил листалку(зациклил) и там есть функция(init()), которая выстроит элементы так, как описано в первом посте.

Работает классно вот бы еще блоки плавно прокручивались вообще было бы супер

[SelenIT]

Вот такая модификация подойдет?

[ilyas]

Вот такая модификация подойдет?

Да подходит ! премного вам благодарен

[CoDy]

Вот такая модификация подойдет?

Я не в коем случае не придираюсь. Оч. интересный наблюдается эффект: если сделать много быстрых кликов мышью но "листалкам" слайдера, когда в видимой области находится НЕ крайний левый или правый слайд, тогда слайды "выходят за ганицы".

Было бы оч. интересно узнать варианты как от него избавиться.

Edited August 20, 2013 by CoDy

[SelenIT]

CoDy, спасибо за найденный баг! Видимо, надо добавить в обработчики листалок stop() для отмены предыдущей анимации. Моя грубая недоработка.

Решил простым игнорированием нажатий во время предыдущей анимации: http://jsfiddle.net/3Ch6a/6/. Если кто-то предложит вариант лучше — буду благодарен.

Edited August 20, 2013 by SelenIT