web-dev-qa-db-fra.com

Taille fixe de Flexslider

J'utilise Flexslider pour extraire des images de produits de différentes tailles à partir d'une API. Je les ai jetées dans le <ul> de Flexslider, mais ces différentes tailles d'image ne fonctionnent pas bien. Flexslider s'anime agréablement lorsque les images ont des hauteurs différentes, mais je souhaite que Flexslider ait une hauteur et une largeur fixes pour s'adapter à ma mise en page. J'ai essayé de l'intégrer dans un <div> de taille fixe, mais Flexslider l'ignore complètement et déborde dans le reste de la présentation. Existe-t-il un moyen de redimensionner les images pour que Flexslider ne soit pas redimensionné?

javascripthtmlcssflexslider
18
Shawn Walton

Supposons que vous souhaitiez une taille fixe de 200 pixels par 200 pixels. Ajoutez ces propriétés aux sélecteurs suivants dans le fichier flexslider.css et vous devriez être prêt à partir:

.flexslider {
    width: 200px;
    height: 200px;
}

.flexslider .slides img {
    width: 200px;
    height: 200px;
}

J'espère que cela t'aides!

36
Parker Young

L'élément avec la classe ".flex-viewport" est le conteneur des diapositives, cet élément adapte sa hauteur à l'image la plus grande de l'ensemble, l'astuce consiste à définir la hauteur de toutes les images sur 0, à l'exception de celle figurant dans la diapositive actuelle. est à l'intérieur de l'élément li avec la classe ".flex-active-slide" qui bascule le script flexslider lorsque les diapositives changent de position, le seul inconvénient de cette astuce est que la bascule de la classe se produit après que la nouvelle diapositive est placée dans la nouvelle position alors un bégaiement se produit, mais vous pouvez y remédier en utilisant du javascript qui lie certaines toggleClass au même événement qui déclenche le changement de diapositive, aide utile.

.flex-viewport  li:not(.flex-active-slide) img{ 

height: 0 !important;
}
4
Lu32

Modifiez la largeur via un script en définissant votre largeur à 400

$('.flex_up').flexslider({
    animation: "slide",
    animationLoop: false,
    itemWidth: 400,
    itemMargin: 5,
});
3
Aarthy Palanivelu

Retirer 

smoothHeight: true,

de 

 jQuery('#slider').flexslider({
            animation: "slide",
            controlNav: false,
            animationLoop: false,
            prevText: "",           
                    nextText: "",
            slideshow: false,
                    smoothHeight: true,
                    animateHeight: false,
            sync: "#carousel",
            start: function(){
                 jQuery('#slider ul.slides img').show(); 
            },
          });
1
Waqas Bukhary

Définissez la taille avec l'option de style de la division spécifique, comme ci-dessous, avec deux curseurs de taille différente:

<div class="flexcontainer">
    <div id="first-slider" class="flexslider" style:"width:100px">
        <ul class="slides">
        ...
        </ul>
    </div> 
    <div id="second-slider" class="flexslider" style:"width:200px">
        <ul class="slides">
        ...
        </ul>
    </div> 
</div>
0
Gianluca Lodigiani