Скрытие концов карусели div фиксированной ширины на страницах разных размеров

Question

Я даже не уверен, что то, о чем я прошу, возможно, поэтому могу воспользоваться советами специалиста.

http://proof.jiujitsu.co.za/index.html

У меня есть div с фиксированной шириной, содержащий карусель jquery.

Карусель шире, чем содержимое главной страницы.

Когда страница загружается на экране с меньшим разрешением (например, 1280 x 1024), остальная часть страницы сдвигается, как и ожидалось, но, очевидно, карусельdiv не делает.

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

Если это возможно, с чего бы мне начать, js или css?

Answer 1

Вы можете изменить следующее:

.slider_layout {
    width: 1605px;
    margin: 0 auto;
    overflow: hidden;
}

На следующее:

.slider_layout {
    width: 1605px;
    overflow: hidden;
    position: relative;
    left: 50%;
    margin-left: -802px;
}

Что будет держать вашу карусель по центру при любом разрешении.