bxSlider-настройки высоты и ширины

Я только начал использовать bxSlider и я столкнулся с проблемой. Мне нужен слайдер с фиксированной шириной (все изображения имеют одинаковое значение) и адаптивной высотой. Это довольно стандартная задача, но я застрял и не знаю, что делать. Прямо сейчас bxSlider изменяет размер моих изображений (чего он не должен делать), а высота статична. Другая проблема заключается в том, что ползунок не центрирован на странице и не имеет правильной ширины.

размер примера больше не доступен.

Это мой код инициализации jQuery:

        $(window).load(function() {
        $('.bxslider').bxSlider({
            mode: 'fade',
            captions: true,
            pagerCustom: '#bx-pager',
            adaptiveHeight: true
        });
    });

и соответствующий HTML-код можно найти на странице (строка исходного кода 53).

EDIT:

прямо сейчас проблема центрирования решена, но bxSlider все еще деформирует изображения, чтобы иметь ту же высоту и ту же ширину. Я просто хочу, чтобы они имели одинаковую ширину (которую имеют исходные изображения) и высоту, чтобы быть адаптивными.

7
bxslider jquery slider

2 ответов

насчет slideWidth свойство, со страницы с bxslider опции

The width of each slide. This setting is required for all horizontal carousels!

такой:

$('.bxslider').bxSlider({
   mode: 'fade',
   captions: true,
   pagerCustom: '#bx-pager',
   adaptiveHeight: true,
   slideWidth: 150
});

добавлено:

.bx-wrapper img {
    margin: 0 auto;
}
5

настройка высоты и ширины для изображений на точках останова мультимедиа действительно работала для меня.

.bx-wrapper img {
   width: 140px;
   height: 140px;
}

@media screen and (max-width: 767px) {
    .bx-wrapper img {
        width: 70px;
        height: 70px;
    }
}
2