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 (слайды не масштабируются)

сторона проблемы:

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

  • браузер: chrome,
  • изображения все из такого же формата (500x356) Формат JPG
  • последняя версия stable jquery: 10.1 последняя версия bxslider: 4.1
  • протестировано на небольшом созданном сайте только с теми 2 элементами, плавающими
    (о & слайд-шоу)
11
bxslider css jquery

6 ответов

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

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

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

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

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

9

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

7

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

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

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

3

в CSS :

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

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

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

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

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

0

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

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

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