images de bxslider avec différentes largeurs

J’essaie d’utiliser le glisseur bxslider avec des images de tailles différentes pour lesquelles j’aimerais avoir la même hauteur et des largeurs différentes. Je voudrais avoir un carrousel comme les exemples sur http://bxslider.com/examples/carousel-demystified . Ces exemples fonctionnent bien, cependant, j’ai des images de 300, 400 et 500 pixels de large, chacune avec des hauteurs différentes qui sont redimensionnées à la même hauteur de 400 pixels. Je ne veux pas redimensionner la largeur de l’image pour qu’elle soit identique ou la rogner. Comment utiliser bxslider avec des images de différentes largeurs?

Si cela ne peut pas être fait avec bxslider, un plugin jquery existe-t-il déjà pour ce comportement?

Exemple: http://jsfiddle.net/GdD52/2/

Étant donné mon amour pour les galeries Web, j’ai pensé écrire un petit script pour créer une galerie de défilement infinie avec des images de différentes largeurs: Fiddle
Je suis conscient que votre souhait était de changer la galerie bxslider mais cette solution semble acceptable
Je pense que bxslider Gallery ne vous donne pas cette possibilité
Comme vous pouvez le voir dans mon violon, il y a une galerie avec des images de différentes largeurs.
Le script n’est qu’un exemple et il peut être amélioré si vous votez ma réponse, je l’améliorerai.

Comme j'aime cette question dans cet autre FIDDLE, vous trouverez une autre version améliorée de cette galerie avec les boutons pour parcourir les images dans un groupe d'arborescence.
Encore une fois, le script pourrait être amélioré, la prochaine étape pourrait être:
N1 rend la galerie sensible
N2 transforme le scipt en un plugin jQuery

 #bx-wrapper img { width: auto !important }

Mais j’ai des problèmes avec le défilement tactile. Je vais donc essayer owlCarousel .

Ok, je vais juste lancer ce code rudimentaire comme une idée – FIDDLE .

C’est un début, dites-moi simplement quels changements vous souhaiteriez. Ce n’est pas parfait, car l’une des images est trop large, mais compte tenu de vos critères, ce serait facile à corriger. Ce que j’ai fait est de faire la plupart du style en CSS, et de faire glisser les images à travers chaque div.

 var first, second, third; var numphotos = $('.hidden img').length; if(numphotos === 0) { first = 0; second = 0; third = 0; } if(numphotos === 1) { first = 0; second = 1; third = 0; putphotos(first, second, third); } if(numphotos === 2) { first = 0; second = 1; third = 2; putphotos(first, second, third); } if(numphotos > 2) { first = 0; second = 1; third = 2; putphotos(first, second, third); } $('.forward').on('click', function(){ first = first+1; second = second+1; third = third+1; putphotos(first, second, third); if(third == numphotos) { first = 1; second = 2; third = 3; putphotos(first, second, third); } }); function putphotos(first, second, third) { $( '.minishowme:nth-child(1)' ).html(''); $( '.minishowme:nth-child(2)' ).html(''); $( '.minishowme:nth-child(3)' ).html(''); $('.hidden img:nth-child(' + first + ')').clone().appendTo( '.minishowme:nth-child(1)' ); $('.hidden img:nth-child(' + second + ')').clone().appendTo( '.minishowme:nth-child(2)' ); $('.hidden img:nth-child(' + third + ')').clone().appendTo( '.minishowme:nth-child(3)' ); }

Je voudrais avoir un carrousel comme les exemples sur http://bxslider.com/examples/carousel-demystified . Ces exemples fonctionnent bien …

L’exemple ne centre pas les diapositives. Il montre 3 diapositives alignées sur le coin en haut à gauche .

Pour afficher des images de hauteur et de largeur différentes, vous devez les aligner sur la même largeur.

et soit au centre verticalement au milieu – démo: http://jsfiddle.net/tK9Wa/1/
ou utilisez overflow: hide pour obtenir la même hauteur – démo: http://jsfiddle.net/6jQPg/3/