web-dev-qa-db-fra.com

bxSlider - paramètres de hauteur et de largeur

Je viens de commencer à utiliser bxSlider et j'ai rencontré un problème. Je veux un curseur avec une largeur fixe (toutes les images ont la même valeur) et une hauteur adaptative. C'est une tâche assez standard, mais je suis coincé et je ne sais pas quoi faire. En ce moment, bxSlider redimensionne mes images (ce qu'il ne devrait pas faire) et la hauteur est statique. Un autre problème est que le curseur n'est pas centré sur la page et n'a pas la bonne largeur.

La taille d'exemple n'est plus disponible.

Voici mon code d'initialisation jQuery:

        $(window).load(function() {
        $('.bxslider').bxSlider({
            mode: 'fade',
            captions: true,
            pagerCustom: '#bx-pager',
            adaptiveHeight: true
        });
    });

et le code HTML correspondant se trouve sur la page (ligne de code source 53).

MODIFIER:

En ce moment, le problème de centrage est résolu mais bxSlider déforme toujours les images pour avoir la même hauteur ET la même largeur. Je veux juste qu'ils aient la même largeur (que les images originales ont) et la hauteur adaptative.

jquerysliderbxslider
8
Darkry

Qu'en est-il de la propriété slideWidth, à partir de la page avec bxslider options

The width of each slide. This setting is required for all horizontal carousels!

Comme ça:

$('.bxslider').bxSlider({
   mode: 'fade',
   captions: true,
   pagerCustom: '#bx-pager',
   adaptiveHeight: true,
   slideWidth: 150
});

Ajouté: 

.bx-wrapper img {
    margin: 0 auto;
}
6
webdeveloper

La configuration d'une hauteur et d'une largeur pour les images sur les points d'arrêt multimédias a fonctionné pour moi.

.bx-wrapper img {
   width: 140px;
   height: 140px;
}

@media screen and (max-width: 767px) {
    .bx-wrapper img {
        width: 70px;
        height: 70px;
    }
}
2
Sneha S