Блог

версия tl; dr: хотите разместить половину изображения за пределами bxslider div, однако overflow: hidden вызывает отображение каждого слайда карусели.

Код, который я использую: http://www.dtcontentguy.com/bxslider /

Скриншоты: http://screencast.com/t/bTTvC4VPEQ

Длинная версия:

Итак, настраиваем bxslider для использования карусели на моем сайте.

Как это должно выглядеть (в photoshop) (см. Скриншот 1)

Моя главная проблема — это круговой формат png, который я использую. Чтобы соответствовать стилю, я хочу расположить его верхнюю половину за пределами div. Я позиционирую его, тогда он выглядит так, все обрезано (скриншот 2)

Это потому, что по умолчанию существует переполнение: скрыто, чтобы скрыть другие части карусели. Если я отключу overflow:hidden, изображение выглядит нормально, но, конечно, отображаются другие элементы (скриншот 3)

Как мне привести изображение в соответствие с каруселью, но обойти переполнение: скрыто?

Спасибо!

Одним из подходов может быть увеличение высоты контейнера и перемещение содержимого следующим образом:

 /* Increase container height, align background to bottom */
.bx-wrapper .bx-viewport {
    height: 456px!important;
    background-repeat: no-repeat;
    background-position: bottom center;
}
/* Push slider arrows down */
.bx-wrapper .bx-controls-direction a {
    margin-top: 25px;
}
.bxslider {
    margin: 0;
}
/* Push slider content down */
.bxslider li {
    padding-top: 184px;
}
/* Position image at top center */
.bxslider li img {
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -91px;
}