Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Витрина-карусель / 1 сообщений из 1, страница 1 из 1
09.06.2014, 08:28
    #38664912
urukhay
urukhay
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Витрина-карусель
Всем привет.

Есть некая витрина, на которой в каждый момент времени отображается одна фотка. Также есть кнопки-стрелки (след./пред.) при нажатии на которые фотка "уезжает" влево либо вправо, в зависимости от того, на какую стрелку нажали. Кнопки должны лежать абсолютом, над фоткой, т.е. при движении фотки стрелки остаются на месте.

Эффект стандартный, вроде бы все просто. Проблемы начинаются дальше! Максимальный размер фотки - 1450 пикселей. Если разрешение экрана больше этого размера, слева и справа от фотки появляются поля. А вот если размер экрана меньше этого размера, то фотка по краям должна быть обрезана. И вот тут я не могу понять, как такое сделать, т.к., с одной стороны, блок нужно сделать фиксированной ширины (см. ниже), а с другой - его ширина должна зависеть от разрешения экрана. Как я себе это видел изначально:

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
.outer
{ 
  width: 1450px;
  height: 730pxp;
  overflow: hidden;
}
.inner
{
  width: 7250px; // на 5 фоток
}

<div class=outer>
  <div class=inner>
    <div style="height: 730px; background: url(photo_1.jpg) top left no-repeat;"></div>
    <div style="height: 730px; background: url(photo_2.jpg) top left no-repeat;"></div>
    <div style="height: 730px; background: url(photo_3.jpg) top left no-repeat;"></div>
    <div style="height: 730px; background: url(photo_4.jpg) top left no-repeat;"></div>
    <div style="height: 730px; background: url(photo_5.jpg) top left no-repeat;"></div>
  </div>
</div>



Так, повторюсь, получается, с одной стороны, диву outer нужно задать фиксированную ширину, чтобы скрыть все то, что выходит за его пределы, а с другой - она должна меняться в зависимости от разрешения экрана. Скажите, это можно с помощью CSS решить? Или тут JS нужен?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Витрина-карусель / 1 сообщений из 1, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 7167ms
Закрыть
start [/forum/search_topic.php?author=Navisioner&author_mode=last_posts&do_search=1]:
 0ms
get settings:
 5ms
get forum list:
 10ms
get settings:
 6ms
get forum list:
 10ms
get settings:
 7ms
get forum list:
 11ms
get settings:
 9ms
get forum list:
 14ms
get settings:
 6ms
get forum list:
 15ms
get settings:
 8ms
get forum list:
 10ms
get settings:
 7ms
get forum list:
 18ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 161ms
get topic data:
 10ms
get forum data:
 2ms
get page messages:
 35ms
get tp. blocked users:
 1ms
others: 6816ms
total:  7167ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]