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

DeMONiZ

Дата 6.7.2011, 13:30 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 92
Регистрация: 2.1.2009
Где: Первоуральск

Репутация: нет
Всего: нет

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

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

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 (ссылка)

(голосов:1)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 174
Регистрация: 28.6.2011

Репутация: нет
Всего: 2

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 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 92
Регистрация: 2.1.2009
Где: Первоуральск

Репутация: нет
Всего: нет

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

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

dma84

Дата 7.7.2011, 19:49 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 16
Регистрация: 4.7.2011

Репутация: нет
Всего: нет

Код


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

Это сообщение отредактировал(а) dma84 - 7.7.2011, 19:54

DeMONiZ

Дата 8.7.2011, 06:19 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 92
Регистрация: 2.1.2009
Где: Первоуральск

Репутация: нет
Всего: нет

Вы видимо не внимательно читали мой первый пост.

Цитата

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

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

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

dma84

Дата 8.7.2011, 10:36 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 16
Регистрация: 4.7.2011

Репутация: нет
Всего: нет

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

Это сообщение отредактировал(а) dma84 - 8.7.2011, 10:40

DeMONiZ

Дата 8.7.2011, 11:30 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 92
Регистрация: 2.1.2009
Где: Первоуральск

Репутация: нет
Всего: нет

Вы говорите глупость вот вам два блока с флотом

Код



<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 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 16
Регистрация: 4.7.2011

Репутация: нет
Всего: нет

Код


<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 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 92
Регистрация: 2.1.2009
Где: Первоуральск

Репутация: нет
Всего: нет

Да и я без проблем уберу из своего когда 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 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 16
Регистрация: 4.7.2011

Репутация: нет
Всего: нет

Цитата(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 блока

Это сообщение отредактировал(а) dma84 - 8.7.2011, 11:42

DeMONiZ

Дата 8.7.2011, 11:37 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 92
Регистрация: 2.1.2009
Где: Первоуральск

Репутация: нет
Всего: нет

Вот это уже болеее походит на истину

dma84

Дата 8.7.2011, 11:38 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 16
Регистрация: 4.7.2011

Репутация: нет
Всего: нет

Цитата(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 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 92
Регистрация: 2.1.2009
Где: Первоуральск

Репутация: нет
Всего: нет

Но блока должно влезать всего 3 внезависисмости от того какое разрешение

dma84

Дата 8.7.2011, 11:43 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 16
Регистрация: 4.7.2011

Репутация: нет
Всего: нет

Цитата(DeMONiZ @ 8.7.2011, 11:38)

Но блока должно влезать всего 3 внезависисмости от того какое разрешение

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

DeMONiZ

Дата 8.7.2011, 11:47 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 92
Регистрация: 2.1.2009
Где: Первоуральск

Репутация: нет
Всего: нет

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

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »