Bxslider НЕ реагирует, когда слайды обернуты внутри плавающего элемента

После тестирования различных чувствительных слайдеров jquery я решил пойти с bxslider. Я потерялся сейчас из-за проблемы, которую я не знаю, как ее решить. Я хочу, чтобы мой bxslider (версия 4.1) находился в правой части моей страницы

HTML

<div id="about">
    <h2>My Title</h2>
    <p>...Some Text...</p>
</div>

<div id="slideshow">    
    <ul class="bxslider">
       <li><img src="img/slide_1.jpg"></li>
       <li><img src="img/slide_2.jpg"></li>
       <li><img src="img/slide_3.jpg"></li>
       <li><img src="img/slide_4.jpg"></li>
    </ul>
</div>

CSS

#about{
    width:400px; 
    float:left;
}
#slideshow{
    max-width:500px;
    float:left;   /* IF I REMOVE THIS LINE, SLIDER IS WORKING CORRECTLY - RESPONSIVE */
}

JS:

$(document).ready(function() {                  
    $('.bxslider').bxSlider({
      controls: false,
      auto: true
    }); 
});

Если я добавлю float: left to #slideshow, произойдет странная вещь, все изображения будут загружены маленькими большими пальцами. Очевидно, что у bxslider нет информации о размерах изображения. Если я дам ширину и высоту ul.bxslider о первом элементе, то он работает, но опять же нет resposivness (слайды не масштабируются)

Боковая проблема:

Мои изображения ширины 500 пикселей, если я даю #slideshow width = 500px, тогда я также теряю чувствительность. Вот почему я использую: max-width: 500px.

  • Браузер: хром,
  • Картинки имеют одинаковый формат (500x356) JPG
  • Последняя версия стабильного jquery: 10.1 Последняя версия bxslider: 4.1
  • Протестировано на небольшом созданном сайте только с этими двумя элементами, плавающими (около и слайд-шоу)

Ответы

Ответ 1

У меня была такая же проблема, однако она не делала ничего реагирующего независимо от того, какой размер/область просмотра и т.д.

Мне нравится bxSlider, поэтому я некоторое время искал источник, и обнаружил, что это проблема css. Вы должны добавить:

.bx-wrapper img{
    display:block;
    max-width: 100%;
}

и это сработало для меня. Я надеюсь, что это исправило это для вас.

Примечание: это может быть исправлено в другой версии.

Ответ 2

В моем случае это произошло из-за сжатой версии js "jquery.bxslider.min.js", когда я использовал несжатый файл, с которым он работал. Ползунок реагирует на несжатый файл, поэтому сжатие должно было что-то испортить.

Ответ 3

Та же проблема я вижу с другими плагинами слайдера, теряя их отзывчивость, когда они обернуты внутри плавающего элемента. Решение, в моем случае, заключалось в том, чтобы добавить:

@media screen and (max-width: 600px) {
    #slideshow {
        float:none;
    }
}

Итак, где-то в ваших стилях вы размещали элемент, который содержит слайды, но когда вы просматриваете менее 600 пикселей, нет необходимости в том, чтобы ползунок поддерживался с правой стороны (из-за меньшей ширины), удаляя поплавок, верните отзывчивость назад.

Ответ 4

CSS:

.bx-wrapper img {
 display:block;
 max-width: 100%;
 height:auto;
}

Ответ 5

У меня было несколько лет назад аналогичная проблема с bxslider и не знаю, как решить,

мой sugesstion использует elastislider ссылка

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

его легко реализовать, и вы можете изменить стиль в .css файлах, как вы хотите

Ответ 6

У меня тоже была проблема, и я решил это, установив начальную очень большую ширину на слайде li элементов слайдера.

bxSlider автоматически установит соответствующее значение для слайдов.

li {
  width: 10000px; // inital width, bxSlider sets its own
  display: block;
}
li img {
  max-width: 100%;
}