Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > Вёрстка веб-сайтов > Резиновый горизонтальый слайдер


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

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

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>

Автор: mark2011 6.7.2011, 20:00
DeMONiZ, 
Вот так вроде бы работает как вам нужно smile

Код

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

Автор: DeMONiZ 7.7.2011, 06:02
Такая реализация не пойдет, да и работать не будет. Если мы ставим ширину блока в авто (width:auto;) то и блоки не вошедшие в экран будут переносится на другую строку то есть вниз а нам нужно расположение блоков паравозиком, чтоб стрелочками прокручивать от одного блока до другого.

А min-width:298px; в данном случае ни как не будет влиять на код.

Автор: dma84 7.7.2011, 19:49
Код

<a style="float:left;" onclick="prev()" href="#"><--</a>    
      <div id="s" style="width:400px;margin-bottom:10px; border:1px solid red; float:left; height:200px">
      
                <div style="overflow-y: hidden; overflow-x:auto;white-space:nowrap">
                    <div style="border:1px solid red; display:inline-block; min-width:298px; height:200px;">1</div>
                    <div style="border:1px solid red; display:inline-block; min-width:298px; height:200px;">1</div>
                    <div style="border:1px solid red; display:inline-block; min-width:298px; height:200px;">1</div>
                    <div style="border:1px solid red; display:inline-block; min-width:298px; height:200px;">1</div>
                    <div style="border:1px solid red; display:inline-block; min-width:298px; height:200px;">1</div>
                    <div style="border:1px solid red; display:inline-block; min-width:298px; height:200px;">1</div>
                    <div style="border:1px solid red; display:inline-block; min-width:298px; height:200px;">1</div>
                    <div style="border:1px solid red; display:inline-block; min-width:298px; height:200px;">1</div>
                    <div style="border:1px solid red; display:inline-block; min-width:298px; height:200px;">1</div>
                </div>
        </div>
    <a style="float:left;" onclick="next()" href="#">--></a>


для IE ниже 8-й версии внутренним блокам нужно задать стиль{display:inline;zoom:1}
P.S.: Горизонтальный скролл оставлен для наглядности
Доктайп:
Код
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Автор: DeMONiZ 8.7.2011, 06:19
Вы видимо не внимательно читали мой первый пост.


Цитата


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

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

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

Автор: dma84 8.7.2011, 10:36
Да, а ещё я невнимательно посмотрел в ваш код, блок с float:left у вас никогда не будет резиновым

Автор: DeMONiZ 8.7.2011, 11:30
Вы говорите глупость вот вам два блока с флотом

Код


<div style="float:left; width:49%; border:1px solid red;">1</div>
<div style="float:left; width:49%; border:1px solid red;">2</div>

Автор: dma84 8.7.2011, 11:34
Код

<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>


короче вот

Автор: DeMONiZ 8.7.2011, 11:35
Да и я без проблем уберу из своего когда float

Вот код:
Код


    <a style="float:left;" class="arrow-left" onclick="prev()" href="#"></a>    

    <a style="float:right;" class="arrow-right" onclick="next()" href="#"></a>
    
        <div id="s" style=" border:0px solid silver; margin-right:20px; margin-left:20px; display:block; height:200px; overflow: hidden;">
                <div style="width:<?=konsult('1');?>px;">
                    <?=konsult()?>
                </div>
        </div>

Автор: dma84 8.7.2011, 11:36
Цитата(DeMONiZ @ 8.7.2011,  11:30)
Вы говорите глупость вот вам два блока с флотом

Код


<div style="float:left; width:49%; border:1px solid red;">1</div>
<div style="float:left; width:49%; border:1px solid red;">2</div>


В примере ТС, если блоку задать ширину 100%, ссылки улетят на другие строки, тупо подгонять процентами типа 96% не вариант

Проще говоря, если на строке присутствуют 3 блока, то задав одному блоку float:left и width:100% он займёт всё пространство строки, вытеснив другие 2 блока

Автор: DeMONiZ 8.7.2011, 11:37
Вот это уже болеее походит на истину

Автор: dma84 8.7.2011, 11:38
Цитата(DeMONiZ @ 8.7.2011,  11:35)
Да и я без проблем уберу из своего когда float

Вот код:
Код


    <a style="float:left;" class="arrow-left" onclick="prev()" href="#"></a>    

    <a style="float:right;" class="arrow-right" onclick="next()" href="#"></a>
    
        <div id="s" style=" border:0px solid silver; margin-right:20px; margin-left:20px; display:block; height:200px; overflow: hidden;">
                <div style="width:<?=konsult('1');?>px;">
                    <?=konsult()?>
                </div>
        </div>


и что этот код даёт?

Автор: DeMONiZ 8.7.2011, 11:38
Но блока должно влезать всего 3 внезависисмости от того какое разрешение

Автор: dma84 8.7.2011, 11:43
Цитата(DeMONiZ @ 8.7.2011,  11:38)
Но блока должно влезать всего 3 внезависисмости от того какое разрешение

ваши предложения?

Автор: DeMONiZ 8.7.2011, 11:47
Все мои предложения и варианты оказались провалом потому я и создал тему, у меня есть одно предложение которым бы не хотелось пользоваться это js

Автор: dma84 8.7.2011, 11:48
Если блоков должно быть 3 в прокручиваемом блоке, то ставим им ширину 33.3%, как-то так:

Код

<style type="text/css">
  #s{border:1px blue solid}
  #s div{border:1px solid red; display:inline-block;width:33.3%;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>

Автор: DeMONiZ 11.7.2011, 05:55
Вот спасибо, работает спасибо за момощь!

Хотя с текстом блоки ведут себя непонятно....

Код

<style type="text/css">
  #s{border:1px blue solid}
  #s div{border:1px solid red; display:inline-block;width:33.3%;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>Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст ТекстТекст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст</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>

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)