bxslider НЕ рэагуе, калі слізгае заварочваюцца ўнутры перамяшчанага элемента

Пасля тэставання розных рэагуюць jQuery паўзункоў, я вырашыў пайсці з bxslider. Я губляюся ў цяперашні час у сувязі з праблемай, якую я не ведаю, як вырашыць. Я хачу, каб мой bxslider (версія 4.1), каб быць на правай баку маёй старонкі

html:

<div id="about">
    

My Title

    
...Some Text... </div> <div id="slideshow">
</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
    }); 
});

Калі я дадаць паплавок: злева #slideshow, то дзіўна, што адбываецца, ўсе выявы знаходзяцца ў невялікіх прэв'ю загружаныя. Відавочна bxslider не мае інфармацыі аб памерах выявы. Калі я даць шырыню і вышыню ul.bxslider аб першым элеменце, то ён працуе, але зноў-такі не resposivness (не слайды не маштабуецца)

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

Мае выявы 500px у шырыню, калі я даць шырыню #slideshow = 500px, то я таксама друзлую responsivness. Вось чаму я выкарыстоўваю: Max-шырыня: 500px.

  • Browser is: chrome,
  • Pictures are all of the same format (500x356) JPG
  • Latest version of stable jquery: 10.1 Latest version of bxslider: 4.1
  • Tested on small created site with only those 2 elements floating
    (about & slideshow)
11

6 адказы

У мяне была такая ж праблема, аднак яна нічога не рабіць зваротны, незалежна ад таго, які памер/відавы экран і г.д.

Мне падабаецца bxSlider таму я паляваў вакол крыніцы, на некаторы час і выявіў, што гэта было пытанне CSS .. вы павінны дадаць:

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

і ён працаваў на мяне. Я спадзяюся, што гэта ўсталяваў яе для вас.

NB: Гэта можа быць выпраўлена ў іншай версіі.

9
дададзена

У маім выпадку гэта было звязана з сціснутай версіяй Js «jquery.bxslider.min.js», калі я выкарыстаў несціснуты файл, ён працаваў. Паўзунок рэагуе з несціснутым файлам, так што сціск павінна быць разбураным нешта.

7
дададзена
Так. Гэта працуе.
дададзена аўтар rybo111, крыніца
Гэта працуе для мяне таксама. дзякуй :)
дададзена аўтар Jeemusu, крыніца
Гэта адказ, выкарыстаў таптаць чужое версію і лато
дададзена аўтар Rob Morris, крыніца

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

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

Так што на пачатковым этапе, дзесьці ў вашых стылях вы плавалі элемент, які змяшчае слайды, але калі вы вьюпорт менш 600px, няма неабходнасці паўзунка, каб падтрымліваць на правай баку (у сувязі з меншай шырынёй), выдаленне паплаўка, вярнуць спагадлівасць назад.

3
дададзена

CSS :

.bx-wrapper img {
 display:block;
 max-width: 100%;
 height:auto;
}
1
дададзена

я быў некалькі гадоў таму на падобную праблему з bxslider і не ведаю, як вырашыць,

my sugesstion is use elastislider link

гэта працуе для мяне з вялікімі малюнкамі і без якіх-небудзь праблем з адаптыўным дызайнам.

гэта лёгка ажыццявіць, і вы можаце змяніць стыль у .css файлы, як вы хочаце

0
дададзена
Тнх, але elastislider карусель, у той час як мне трэба проста добры просты плыўнасці гарызантальнага слайд-шоў з пастаронкавага кулямі. Я паспрабаваў FlexSlider, але ёсць памылка, з-за павольнай загрузкі паўзунка, вы можаце ўбачыць яго мігаценне ў пачатку.
дададзена аўтар PathOfNeo, крыніца
няма праблем .. я стараюся дапамагчы .. для мяне гэта працуе добра.
дададзена аўтар user2232273, крыніца

У мяне была праблема, як добра, і я вырашыў яго з ўстаноўкі пачатковага вельмі высокую шырыню на слайдзе LI элементаў паўзунка.

bxSlider будзе аўтаматычна ўстаноўлена адпаведнае значэнне для слайдаў.

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