Верста адаптивного слайдера проблема?

Question

[thehighhomie]

Столкнулся с такой проблемой: не получается сверстать адаптивный список с картинками в css. Не хотелось бы в js использовать лишнюю стилизацию. Дело в том что не получается обернуть сам ul в обертку, чтобы элементы списка ( li ) с картинками встали горизонтально и не выпирали, чтобы можно было их передвигать в js. Все что получилось - это или ul делать очень большой шириной а обертке overflow: hidden, или вот этот вариант https://jsfiddle.net/0vc1kz6n/4/ через white-space: nowrap у списка и display: inline-block у li, но такой подход оставляет отступы от картинок, мне это не подходит. Мне кажется что есть более интересные и гибкие решения нежели эти, не говоря уже о js чтобы сверстать адаптивный слайдер. Интересно узнать как еще такое можно реализовать.
Пожалуйста не предлагайте использовать уже готовые слайдеры и т.п. сам пользуюсь bxslider'ом, но я хочу сам такие приложения писать.

Comments

[Кирилл Туровников]

для того чтобы не было отступов между li добавьте ul{ font-size:0; }

Answer 1

[Кирилл Туровников]

Выше написал, что чтобы не было отступов между li добавьте ul{ font-size:0; }
Вот написал простенький слайдер https://jsfiddle.net/straj/0vc1kz6n/6/

Если все таки нужно именно float:left; то вот пример https://jsfiddle.net/straj/0vc1kz6n/8/

Comments

[thehighhomie]

спасибо) а без display: inline-block и white-space можно как нибудь? может с обычными вариантами li float-left?

[thehighhomie]

и такое решение много где будет прокатывать? с кроссбраузерностью и мобильными устройствами нет проблем?

[Кирилл Туровников]

thehighhomie: на мобильных можно просто нативно скролить

[Кирилл Туровников]

thehighhomie: добавил пример с float:left;

[thehighhomie]

Кирилл Туровников: спасибо большое) вот так бы все объясняли то что нужно а не советовали обратиться к уже готовым слайдом, хотя в посте была просьба не предлагать этого...

[thehighhomie]

Кирилл Туровников: правда jquery я не знаю, ну попробую так разобрать)

[Кирилл Туровников]

thehighhomie: ну если вы хотите писать что-то свое, то придется изучить) ну и если вопрос решен, то можете его закрыть

[thehighhomie]

Кирилл Туровников: простите, забываю еще отмечать решения)

Answer 2

[Дмитрий Новиков]

сделайте li блочными и задайте им float:left;
ul пусть будет произвольной ширины, а все дело оберните в контейнер с overflow:hidden; - примерно так большинство слайдеров и работают.

p.s.: а вообще бросайте вы этот велосипед и берите готовый нормальный слайдер.

Comments

[thehighhomie]

не работает это: сделайте li блочными и задайте им float:left;
ul пусть будет произвольной ширины, а все дело оберните в контейнер с overflow:hidden; я пробовал. li при float: left и display: block не встают в ряд, а стоят друг под другом, пока у ul не сделаешь ширину больше...

[thehighhomie]

что все? дальше нет предложений?

[Кирилл Туровников]

thehighhomie: Ну вообще все слайдеры так и делают, считаю количество элементов и их ширины, складывают и задают родителю, но при float:left; элементы конечно сваливаются, без указания ширины