Высота установки Bxslider

Итак, я только начал использовать bxslider.

Однако у меня возникают проблемы с настройкой размера слайдера. Естественно, он занимает высоту самого большого элемента (я думаю). Как установить его на фиксированную высоту, скажем 200px?

ОТВЕТЫ

Ответ 1

Вы можете добавить следующие css.

.bx-wrapper, .bx-viewport {
    height: 200px !important; //provide height of slider
}

Посмотрите эту скрипку.. bxslider

Ответ 2

Почему бы не стилизовать элементы? Если вы установите высоту исправления для обертки, у вас могут возникнуть проблемы с переполнениями и позиционированием.

Если вы используете списки:

.bx-wrapper ul li { height: 200px; }

Ответ 3

Вам нужно установить все 3 элемента, связанные с высотой отображаемого изображения, которые являются основным контейнером, внутренним контейнером и самими изображениями...

:

.bx-wrapper, .bx-viewport, .bx-wrapper img {height: 500px !important;}

  • Я должен отметить, что:
    bxSlider использует 100% -ную ширину, чтобы поддерживать отзывчивость, поэтому вы можете получить искаженное изображение, заставив высоту, и именно поэтому вам нужно показывать изображения с предварительным размером на ползунок (только для устранения проблемы с высотой.)

  • Решение:
    использовать медиа-запросы для установки другой высоты при просмотре на мобильном телефоне (просто предложение)

Желаем удачи...

Ответ 4

Это сработало для меня и позволяет сохранять отзывчивость

    .bx-wrapper, .bx-viewport, .bx-wrapper img {max-height: 200px !important;}

Ответ 5

Я решил сосредоточить и зафиксировать размер с этими строками

.bx-wrapper img {
height: 400px;
max-width: auto;
display: inline;

}

Ответ 6

Я бы рекомендовал обернуть его с помощью div, а затем настроить div CSS. Bxslider Я считаю, наследует высоту и ширину.

.yourDivClass{
    height:200px;
    width:200px;
}

Здесь вы можете настроить li соответственно:

.yourDivClass li {
    background-color:green; //just to see the overflow if height & width isn't equal
}

Надеюсь, что это поможет.

Ответ 7

Обновление!

http://jsfiddle.net/u62LR/

Просто установите высоту изображения...

.bx-wrapper, .bx-viewport {
    height: [IMAGE HEIGHT] !important; 
}

Ответ 8

Если вы не хотите использовать! важно просто сделать это

.bx-wrapper {
  height: 400px; //Just choose your height
  display: block;
  overflow: hidden;
 }