javascript - bootstrap - Tamaño fijo de Flexslider

flexslider bootstrap 4

Question

Estoy usando Flexslider para extraer imágenes de productos de diferentes tamaños desde una API. Los he estado lanzando al <ul> Flexslider, pero estos diferentes tamaños de imagen no funcionan bien. Flexslider anima agradablemente cuando las imágenes tienen diferentes alturas, pero quiero que Flexslider tenga una altura y un ancho fijos que se ajusten a mi diseño. He intentado poner todo en un <div> tamaño fijo, pero Flexslider lo ignora por completo y se desborda en el resto del diseño. ¿Hay alguna forma de cambiar el tamaño de las imágenes para que se ajuste de manera que Flexslider no cambie de tamaño?

Answer 1

Ajuste el tamaño con la opción de estilo del div específico como se muestra a continuación, con dos controles deslizantes con diferentes tamaños:

<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>

Answer 2

Cambie el ancho a través del script, diga que su ancho sea 400

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

Answer 3

Digamos que querías un tamaño fijo de 200px por 200px. Agregue estas propiedades a los siguientes selectores en el archivo flexslider.css y debería estar listo:

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

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

¡Espero que esto ayude!

Answer 4

El elemento con la clase ".flex-viewport" es el contenedor de las diapositivas, ese elemento adapta su altura a la imagen más alta del conjunto, el truco establece que todas las imágenes tengan la altura 0, excepto la que se encuentra en la diapositiva actual. está dentro del elemento li con la clase ".flex-active-slide" que el script flexslider alterna cuando las diapositivas intercambian posiciones, lo único malo de este truco es que la alternancia de la clase ocurre después de que la nueva diapositiva se coloca en la nueva posición luego se produce un tartamudeo, pero puede lidiar con eso mediante el uso de algunos javascript vinculando algunas toggleClass al mismo evento que desencadena el cambio de diapositiva, la ayuda puede ser útil.

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

height: 0 !important;
}

Answer 5

retirar

smoothHeight: true,

desde

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