web-dev-qa-db-fra.com

bxslider PAS sensible lorsque les diapositives sont enveloppées dans un élément flottant

Après avoir testé divers curseurs jQuery sensibles, j’ai décidé d’utiliser Bxslider. Je suis maintenant perdu à cause d’un problème que je ne sais pas comment résoudre. Je veux que mon bxslider (version 4.1) soit sur le côté droit de ma page

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

Si j'ajoute float: left to #slideshow, alors une chose étrange se produit: toutes les images sont chargées dans de petits pouces. De toute évidence, bxslider n'a pas d'informations sur les tailles d'image. Si je donne à ul.bxslider la largeur et la hauteur du premier élément, alors cela fonctionne, mais là encore pas de réactivité (les diapositives ne sont pas mises à l'échelle)

Côté problème:

Mes images sont 500px large, si je donne #slideshow width = 500px, alors je perds aussi la réactivité. C'est pourquoi j'utilise: max-width: 500px.

  • Le navigateur est: chrome, 
  • Les images sont toutes du même format (500x356) JPG
  • Dernière version de stable jquery: 10.1 Dernière version de bxslider: 4.1
  • Testé sur un petit site créé avec seulement ces 2 éléments flottants
    (à propos de & diaporama)
jquerycssbxslider
11
PathOfNeo

J'ai eu le même problème, mais il n'a rien fait de réactive, peu importe la taille/la fenêtre d'affichage, etc. 

J'aime bxSlider, alors je me suis mis à la recherche de source, pendant un certain temps, et j'ai découvert qu'il s'agissait d'un problème lié au format CSS. Vous devez ajouter: 

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

et cela a fonctionné pour moi. J'espère que cela a réglé le problème pour vous.

NB: Cela peut être corrigé dans une version différente.

9
m33bo

Dans mon cas, cela était dû à la version compressée du fichier js "jquery.bxslider.min.js" lorsque j'ai utilisé le fichier non compressé qui fonctionnait. Le curseur réagit avec le fichier non compressé, la compression doit donc avoir ruiné quelque chose.

7
ckhawand

Le même problème que je vois avec d’autres plug-ins à curseur, perd leur réactivité quand ils sont enveloppés dans un élément flottant. La solution, dans mon cas, a été d’ajouter:

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

Ainsi, au début, quelque part dans vos styles, vous avez flotté l'élément contenant les diapositives, mais lorsque la fenêtre d'affichage est inférieure à 600 pixels, il n'est pas nécessaire que le curseur reste sur le côté droit (en raison de la largeur réduite), en supprimant le réactivité à nouveau.

3
PathOfNeo

CSS:

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

il y a quelques temps, j'ai eu un problème similaire avec le bxslider et je ne sais pas comment le résoudre. 

ma sugesstion est utiliser elastislider link

cela fonctionne pour moi avec de grandes images et aucun problème avec le design réactif.

il est facile à implémenter et vous pouvez changer le style dans les fichiers .css comme vous le souhaitez

0
user2232273

J'avais aussi le problème et je l'ai résolu en définissant une très grande largeur initiale sur la diapositive li éléments du curseur.

bxSlider définira alors automatiquement une valeur appropriée pour les diapositives.

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