Jump to content
  • 0

Резиновый горизонтальый слайдер


prospravka.ru
 Share

Question

Здравствуйте форумчане, Сегодня столкнулся с небольшой проблемкой вот и решил попросить помощи у вас.

Есть необходимость сделать горизонтальный слайдер с тремя видимыми ячейками остальные видны при нажатии на стрлочки вправо влево.

js часть написана.

Вопрос вот в чем не могу сделать так слайдер был резиновым. В данном случае он 900 пикселей а надо чтоб он подстраивался под экран.

Реализация подставления нужной ширины через js не преветствуется.

Прилагаю код:



<a style="float:left;" onclick="prev()" href="#"><--</a>
<div id="s" style="margin-bottom:10px; border:1px solid red; width:900px; float:left; display:block; height:200px; overflow: hidden;">
<div style="width:1800px;">
<div style="border:1px solid red; float:left; width:298px; height:200px;">1</div>
<div style="border:1px solid red; float:left; width:298px; height:200px;">2</div>
<div style="border:1px solid red; float:left; width:298px; height:200px;">3</div>
<div style="border:1px solid red; float:left; width:298px; height:200px;">4</div>
<div style="border:1px solid red; float:left; width:298px; height:200px;">5</div>
<div style="border:1px solid red; float:left; width:298px; height:200px;">6</div>
</div>
</div>
<a style="float:left;" onclick="next()" href="#">--></a>

Link to comment
Share on other sites

10 answers to this question

Recommended Posts

  • 0

Интересно, как Вы предлагаете проверять без кода скрипта? Откуда я знаю, что у Вас делает - prev()? Какие стили он меняет? Какие размеры задает?

А если по существу, то... Вы знаете другие способы сделать что-либо резиновым кроме тех что я указал? Было бы очень интересно узнать о них.

Edited by rookie
Link to comment
Share on other sites

  • 0

Вам не скрипт проверять надо а html скрипт тут не причем а раз это слайдер то и так ясно что prev() и next() это стрелки которые отвечают за скрол. Нет других способов я не знаю, но вы не зная работает то что вы прдложили или нет все же пишите. Для начала попробуйте сами то что вы сказали. Я же прошу помочь мне переделать мой код или же предложить совй который будет отвечать моим требованиям.

Link to comment
Share on other sites

  • 0

prospravka.ru, каким макаром он должен подстраиваться под экран, если ты проставил везде фиксированную ширину?

rookie все правильно сказал

width:1800px - что это?

width:900px; - что это?

width:298px; - что это?

Link to comment
Share on other sites

  • 0

Вам не скрипт проверять надо а html

Не знаю почему, но мне кажется что нам проверять ничего не надо. Мы просто предлагаем Вам варианты решения и уже Вы сами их проверяете бо проблема у Вас, а не у нас и Вы гораздо лучше знаете какого результата в итоге хотите добиться.

И кстати, Вы мне так и не ответили - как можно добиться liquid width кроме тех способов которые я привел?

Link to comment
Share on other sites

  • 0

Вы предлогаете не работающие варинты решения для данного кода. То есть вы сидите и гадаете

Да согласен поставил фиксированную. Дак вот и предложите вариант решения как поставить процентную чтоб достичь моих целей

Ни кто ведь еще не предложил рабочий вариант решения, не так ли?

Допустим делаем так


<style type="text/css">
#s{border:1px blue solid}
#s div{border:1px solid red; display:inline-block; width:298px; height:200px;}
*html #s div{display:inline !important;zoom:1}
*+html #s div{display:inline !important;zoom:1}
*html a.left{left:-20px !important}
</style>
<div id="main" style="position:relative;white-space:nowrap;border:1px green solid;overflow:hidden;padding:0 20px">
<a class="left" style="display:inline-block;position:absolute;left:0;top:0;margin-top:100px" onclick="prev()" href="#"><--</a>
<div id="s" style="width:100%;display:inline-block;overflow-x:auto;overflow-y:hidden;white-space:nowrap;height:200px">
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
</div>
<a style="display:inline-block;position:absolute;right:0;top:0;margin-top:100px" onclick="next()" href="#">--></a>
</div>

Достигаем этим самым резиновое свойства блока, но так же нужно и достичь чтоб только три блока входили в экран, то есть и их сделать резиновыми...

Link to comment
Share on other sites

  • 0

Достигаем этим самым резиновое свойства блока, но так же нужно и достичь чтоб только три блока входили в экран, то есть и их сделать резиновыми...

Математику в школе учили? 100% на три разделить можете?

Link to comment
Share on other sites

  • 0

Не стоит хамить я думаю. Я у тебя помощи прошу с кодом, а ты мой код даже прочитать не можешь глазами, возьми сейчас и задай 33% блоку и посмотри что выйдет, а потом предлогай. Если было бы все так просто то и тему создавать не стал.

Сделал, своими силами. Переписал код по другому

Link to comment
Share on other sites

  • 0

Не стоит хамить я думаю. Я у тебя помощи прошу с кодом, а ты мой код даже прочитать не можешь глазами, возьми сейчас и задай 33% блоку и посмотри что выйдет, а потом предлогай. Если было бы все так просто то и тему создавать не стал.

Сделал, своими силами. Переписал код по другому

Покажи плиз, как решил задачу.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy