[ Поиск ] - [ Пользователи ] - [ Календарь ]
Полная Версия: нестандартный слайдер
дианитка
Здравствуйте. Вот нужно сделать нестандартный слайдер как в приложении. Нестандартность в том, что сам слайдер резиновый, и картинки в нем обрезаються, при прокрутке за черный прямоугольник внизу можно просматривать все фотографии. Сначала я сделала ненумерованный список, установила для li display:inline, рассчитала программно высоту и ширину каждой картинки и задала их при помощи padding-bottom и padding-right. В firefoxe прошло, но в хроме нет. Пробовала ставить display:inline-block, но при этом отображается одна картинка, а все остальные переносяться на новую строку, т.е ведут себя как блочные. что можно сделать, чтобы они выстраивались все-таки в одну строку.

_____________
дианка[COLOR=purple]
andrey888
Попробуйте еще поиграть с display (inline, inline-block, inline-table и т.д. ) если у родительского блока в котором все картинки ширина не auto - попробовать дать li свойство float , например float:left;

_____________
Прогноз на следующие 5 лет : Россия, Китай - две величайшие державы.
США в Ж*пе. Справедливость восторжествует. )
glock18
дианитка
на скриншоте то, как есть или то, как должно быть?
Не совсем понятно, пробовали ли вы уже display: block; и float: left;
дианитка
на скриншоте, как должно быть. если поставить display: block; и float: left; то следующая картинка, т.к. она не помещается по ширине, переносится на следующую строку

_____________
дианка[COLOR=purple]
glock18
Цитата (дианитка @ 3.07.2013 - 10:04)
на скриншоте, как должно быть. если поставить display: block; и float: left; то следующая картинка, т.к. она не помещается по ширине, переносится на следующую строку

дк должна помещаться.

Должен быть див подложка с очень большой шириной (такой чтобы все картинки влезли, можно с запасом).

что-то в духе

<div class="image-wrapper">
<div class="image-slider">
<!-- сами картинки -->
</div>
</div>

у враппера overflow: hidden, и стандартные ваши размеры.
У слайдера большущая ширина (что-нибудь типа 9999px или даже больше)
соответственно, сдвигаете сам слайдер внутри враппера при прокрутке
andrey888
Цитата
Цитата
Цитата (дианитка @ 3.07.2013 - 10:04)
на скриншоте, как должно быть. если поставить display: block; и float: left; то следующая картинка, т.к. она не помещается по ширине, переносится на следующую строку


дк должна помещаться.


в этом и проблема.
Делайте по примеру который вам дали выше.

_____________
Прогноз на следующие 5 лет : Россия, Китай - две величайшие державы.
США в Ж*пе. Справедливость восторжествует. )
glock18
Цитата (andrey888 @ 3.07.2013 - 18:22)
Цитата
Цитата
Цитата (дианитка @ 3.07.2013 - 10:04)
на скриншоте, как должно быть. если поставить display: block; и float: left; то следующая картинка, т.к. она не помещается по ширине, переносится на следующую строку


дк должна помещаться.


в этом и проблема.
Делайте по примеру который вам дали выше.

мне делать? )
andrey888
glock18
Нет конечно . Автору ) ..

Но если ты так хочешь ...

_____________
Прогноз на следующие 5 лет : Россия, Китай - две величайшие державы.
США в Ж*пе. Справедливость восторжествует. )
glock18
ну, вы меня процитировали просто smile.gif
andrey888
чтоб автор еще раз прочитал ) .. повторение - мать учения ) smile.gif

_____________
Прогноз на следующие 5 лет : Россия, Китай - две величайшие державы.
США в Ж*пе. Справедливость восторжествует. )
glock18
Цитата (andrey888 @ 3.07.2013 - 19:57)
чтоб автор еще раз прочитал ) .. повторение - мать учения ) smile.gif

smile.gif да, один мой препод любил говорить "Повторение - мать заикания" smile.gif С этим не поспоришь, скажу я rolleyes.gif
дианитка
я сделала через inline-block и абсолютное позиционирование. а див, в который эти картинки вложены, шириной 100% - он заканчивается, где начинается вертикальная прокрутка у браузера, в общем, он резиновый. но все-равно не пойму, почему, когда это были строковые, то позиционирование не понадобилось, картинки выстроились в строку. Ведь элементы inline-block должны вести себя по отношению к внешним элементам как строки.

_____________
дианка[COLOR=purple]
Быстрый ответ:

 Графические смайлики |  Показывать подпись
Здесь расположена полная версия этой страницы.
Invision Power Board © 2001-2024 Invision Power Services, Inc.