Проблема jQuery Serialscroll CSS - PullRequest
Новая
       23

Проблема jQuery Serialscroll CSS

0 голосов
/ 14 июля 2010

У меня потрясающая проблема с реализацией serialscroll. Я установил его так, чтобы каждый элемент списка имел ширину 100%, чтобы запустить слайд-шоу во весь экран.

Вы можете проверить полный код здесь: http://www.reverenddan.net/so/

CSS довольно прост: 

#slideshow {
width: 100%;
height:100%;
margin: 0;
padding: 0;
position:absolute;
overflow:hidden;
}

#slideshow ul {
width: 800%;
height:100%;
margin: 0;
padding:0;
}

#slideshow li {
width:12.5%;
height:100%;
margin: 0;
padding: 0;
float:left;
list-style: none;
}

и соответствующий HTML: 

<div id="slideshow">
                <ul>
                    <li id="slide1"><img class="centered" src="img/beetle.png" width="344" height="380" /></li>
                    <li id="slide2"><img class="centered" src="img/beetle.png" width="344" height="380" /></li>
                    <li id="slide3"><img class="centered" src="img/beetle.png" width="344" height="380" /></li>
                </ul>
            </div>

Все это работает, но если вы изменяете размер окна во втором или третьем кадре, элементы списка, содержащие изображения, изменяют размер с той же скоростью, что и окно браузера, а не остаются в центре. Я использовал немного jquery для вертикального выравнивания изображений, но я думал, что text-align: center и 100% ширины будет достаточно, чтобы держать их на месте.

Буду очень признателен за любые мысли, я на грани привязи!

1 Ответ

1 голос
/ 15 июля 2010

Попробуйте изменить #slideshow, чтобы использовать фиксированную ширину, относительное позиционирование и автоматическое левое и правое поле, которые должны иметь эффект его центрирования (и его содержимого): 

#slideshow{
  position: relative;
  height: 100%;
  width: 900px;
  margin: 0 auto;
  padding: 0;
  overflow:hidden;
}

Изменить 900pxширина, которую я предлагаю выше, для чего-то меньшего, если вы не собираетесь использовать изображения такого широкого размера.

...