thehighhomie
@thehighhomie

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

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

Если все таки нужно именно float:left; то вот пример https://jsfiddle.net/straj/0vc1kz6n/8/
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
dmitriy_novikov
@dmitriy_novikov
Занимаюсь web-разработкой с 2010г. http://dmnv.ru
сделайте li блочными и задайте им float:left;
ul пусть будет произвольной ширины, а все дело оберните в контейнер с overflow:hidden; - примерно так большинство слайдеров и работают.

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы