Как правильно сверстать слайдер?

Question

[Руслан Левиев]

Сразу оговорюсь, что знаю, что в сети есть просто уйма плагинов слайдеров. Но я хочу сам разобраться как сделана их вёрстка, особенно учитывая тот момент, что вёрстки слайдеров, которые я находил в сети, не подходят под мой пример. А мой пример будет ещё несколько модифицироваться от случая к случаю на сайте (т.е. на сайте несколько разных с виду слайдеров, но похожей функциональности).
Анимация слайдера будет обычная — движение ленты вперёд и назад, зацикленное (после последнего элемента следующим выезжает первый), со стрелочками вправо-влево.

Итак, элементами слайдера у нас являются блоки с текстом. Блок фиксированной ширины 300px, высота блока — не фиксированная (это важно, иначе всё было бы намного проще), зависит от содержимого.

Слайдер ездит внутри блока шириной 640px, который выровнен по центру экрана (стандартная вёрстка макета сайта — колонка по центру фиксированной ширины). Соответственно нужно чтобы все элементы слайдера «встали» в одну линию слева-направо и те элементы, которые не влезают в ширину, скрывались (overflow:hidden).

Дальше начинаются проблемы: независимо от того, является элемент слайдера блочным элементом с float или инлайновым — всё равно не влезающие в 640px элементы переносятся на вторую и последующие строки. Можно, конечно, с помощью position:relative и свойства top поднять эти элементы, но это получается очень коряво, ибо у разных элементов будет разное значение top (поскольку одни элементы на второй строке, другие на третьей).

Как бы выровнять их так, как я описал в начале? Чтобы в последующем через jQuery задействовать анимацию по нажатию на стрелки, чтобы лента двигалась.

Код на jsfiddle.

Answer 1

[Руслан Касымов]

Я сделал бы враппер скажем div у которого прописано white-space: nowrap; которая запрещает переносить на следующую строку вложенные в него блоки у которых display: inline-block; К тому же можно указать vertical-align: middle для вложенных блоков.

Пример: jsfiddle.net/49zqV

А это уже в действии и с анимацией: jsfiddle.net/UqYCM

spoiler

<div class="carousel">
    <div class="wrap">
        <div class="item-1"></div>
        <div class="item-2"></div>
        <div class="item-3"></div>
    </div>
</div>

.carousel {
    width: 300px;
    border: 1px solid red;
}
.wrap {
    white-space: nowrap;
}
.wrap > div {
    vertical-align: middle;
    display: inline-block;
    width: 300px;
}
.item-1 {
    height: 250px;
    background: red;
}
.item-2 {
    height: 350px;
    background: blue;
}
.item-3 {
    height: 300px;
    background: green;
}

Comments

[Руслан Левиев]

я ж сказал, что у блоков, элементов слайдера (item-1, item-2, item-3) не фиксированная высота, неизвестная.

[Руслан Касымов]

в примере высота задана чисто для демонстрации, можно заменить текстом: jsfiddle.net/36qmt

[Руслан Левиев]

Только для элементов слайдера (item-1, item-2 и т.д.) надо ещё задать:
white-space: normal;

иначе длинный текст без переносов будет вылезать за пределы контейнера.

Answer 2

[mrspd]

Я обычно вкладываю элементы внутрь еще одного дива, и делаю ему оооочень большой width. jsfiddle.net/krL7q/1

Comments

[Руслан Левиев]

хм, хорошая идея

[Руслан Касымов]

плохая идея, магические числа - зло!

[Krickt]

Умножать ширину слайдера на кол-ве слайдов не пробывали?

[Руслан Касымов]

зачем решать проблему при помощи JS или явным указанием ширины враппера если можно решить ее на чистом css???