Фиксированный размер Flexslider

Я использую Flexslider для вывода изображений продуктов разных размеров из API. Я выбрасывал их в Flexslider <ul>, но эти разные размеры изображений плохо воспроизводятся. Flexslider красиво анимирует, когда изображения имеют разную высоту, но я хочу, чтобы Flexslider имел фиксированную высоту и ширину, чтобы соответствовать моему расположению. Я попытался поместить все это в фиксированный размер <div>, но Flexslider полностью игнорирует его и переполняет остальную часть макета. Есть ли способ изменить размер изображений так, чтобы Flexslider не изменял размер?

Ответ 1

Скажем, вам нужен фиксированный размер 200px на 200px. Добавьте эти свойства в следующие селекторы в файле flexslider.css, и вам должно быть хорошо идти:

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

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

Надеюсь, это поможет!

Ответ 2

Элемент с классом ".flex-viewport" является контейнером слайдов, этот элемент адаптирует его высоту к более высокому изображению в наборе, трюк задает высоту всех изображений до 0, кроме того, который находится в текущий слайд, который находится внутри элемента li с классом ".flex-active-slide", который flexslider script переключает, когда слайды меняют позиции, единственная плохая вещь об этом трюке заключается в том, что переключатель класса происходит после того, как новый слайд помещается в новую позицию, тогда происходит заикание, но вы можете справиться с этим, используя некоторый javascript, привязывающий некоторый toggleClass к тому же событию, которое запускает изменение слайда, помогает быть полезным.

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

height: 0 !important;
}

Ответ 3

Удалите

smoothHeight: true,

из

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

Ответ 4

Задайте размер с опцией стиля конкретного div, как показано ниже, с двумя ползунками с разным размером:

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

Ответ 5

Измените ширину с помощью script, чтобы ваша ширина была 400

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