it-swarm.com.de

der Bxslider reagiert NICHT, wenn die Folien in einem Element mit Float-Element angeordnet sind

Nachdem ich verschiedene responsive Jquery-Slider getestet hatte, entschied ich mich für bxslider. Ich bin jetzt aufgrund eines Problems verloren, das ich nicht lösen kann. Ich möchte, dass sich mein Bxslider (Version 4.1) auf der rechten Seite meiner Seite befindet

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
    }); 
});

Wenn ich Float: left zu #slideshow hinzufüge, passiert etwas Seltsames, alle Bilder werden in kleinen Daumen geladen. Offensichtlich hat bxslider keine Informationen zu den Bildgrößen. Wenn ich dem ul.bxslider Breite und Höhe um das erste Element gebe, dann funktioniert es, aber auch hier keine Antwort (keine Skalierung der Folien)

Nebenproblem:

Meine Bilder sind 500px breit, wenn ich #slideshow width = 500px gebe, dann verliere ich auch die Reaktionsfähigkeit. Deshalb verwende ich: max-width: 500px.

  • Browser ist: Chrom, 
  • Bilder haben alle das gleiche Format (500x356) JPG
  • Neueste Version von Stable Jquery: 10.1 Neueste Version von Bxslider: 4.1
  • Getestet auf einer kleinen Site mit nur diesen beiden Elementen
    (über & Diashow)
11
PathOfNeo

Ich hatte das gleiche Problem, reagierte jedoch nicht, egal welche Größe/Ansichtsfenster usw. 

Ich mag bxSlider, also habe ich für eine Weile nach source gesucht und festgestellt, dass es sich um ein CSS-Problem handelt. Sie müssen Folgendes hinzufügen: 

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

und es hat für mich funktioniert. Ich hoffe, das hat es für Sie behoben.

Hinweis: Dies kann in einer anderen Version behoben werden.

9
m33bo

In meinem Fall lag es an der komprimierten Version von js "jquery.bxslider.min.js", als ich die unkomprimierte Datei benutzte. Der Schieberegler reagiert auf die unkomprimierte Datei, daher muss die Komprimierung etwas ruiniert haben.

7
ckhawand

Das gleiche Problem, das ich mit anderen Slider-Plugins sehe, verliert ihre Reaktionsfähigkeit, wenn sie in einem Float-Element eingeschlossen ist. In meinem Fall bestand die Lösung darin, Folgendes hinzuzufügen:

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

Sie haben also anfangs irgendwo in Ihren Styles das Element verschoben, das die Folien enthält, aber wenn der Darstellungsbereich weniger als 600 Pixel beträgt, müssen Sie den Schieberegler auf der rechten Seite (aufgrund der geringeren Breite) nicht beibehalten, den Float entfernen und den Wert zurückgeben Reaktionsfähigkeit wieder zurück.

3
PathOfNeo

CSS:

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

ich hatte vor einiger zeit ein ähnliches problem mit dem bxslider und weiß nicht, wie man es löst, 

meine empfehlung ist die verwendung von elastislider link

es funktioniert für mich mit großen Bildern und ohne Probleme mit dem responsiven Design.

es ist einfach zu implementieren und Sie können den Stil in den .css-Dateien nach Ihren Wünschen ändern

0
user2232273

Ich hatte auch das Problem, und ich löste es, indem ich zunächst eine sehr große Breite an den Schieberegler li der Schieberegler festlegte.

bxSlider stellt dann automatisch einen geeigneten Wert für die Folien ein.

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