Question

我正在使用Flexslider从API中提取不同大小的产品图像。我一直把它们扔进Flexslider的<ul>，但这些不同的图像尺寸效果不佳。当图像具有不同的高度时，Flexslider很好地动画，但我希望Flexslider具有固定的高度和宽度以适合我的布局。我已经尝试将整个事物放入固定大小的<div>，但Flexslider完全忽略它并溢出到布局的其余部分。有没有办法调整图像大小以适应Flexslider不调整大小？

Answer 1

假设你想要一个200px到200px的固定大小。将这些属性添加到flexslider.css文件中的以下选择器中，您应该很高兴：

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

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

希望这有帮助！

Answer 2

具有类“.flex-viewport”的元素是幻灯片的容器，该元素使其高度适应集合中较高的图像，技巧将所有图像高度设置为0，除了该图像中的高度。当幻灯片位于li元素内部，其类为“.flex-active-slide”，当幻灯片交换位置时，flexslider脚本切换，这个技巧的唯一坏处是，在放入新幻灯片后，类的切换发生新的位置然后发生口吃，但你可以通过使用一些javascript将一些toggleClass绑定到触发幻灯片更改的同一事件来处理它，有助于提供帮助。

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

height: 0 !important;
}

Answer 3

通过脚本更改宽度，表示宽度为400

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

Answer 4

删除

(function () {
var app = angular
    .module('testApp', ['ui.grid', 'ui.grid.edit', 'ui.bootstrap', 'ngAnimate'])
    .controller('TestController', TestController);

TestController.$inject = ['$scope', 'uiGridConstants'];

function TestController ($scope, uiGridConstants) {
    $scope.oneAtATime = false;
    $scope.myData = myData;
    $scope.msg = [];
    $scope.gridOptions = [];
    $scope.getGridOptions = function (index) {
        $scope.gridOptions[index] ={
            showColumnFooter: true,
            columnDefs: [
                { field: 'ticker', enableCellEdit: false, width: '33%' },
                { field: 'current_w', aggregationType: uiGridConstants.aggregationTypes.sum, enableCellEdit: false, width: '33%' },
                { field: 'new_w', aggregationType: uiGridConstants.aggregationTypes.sum, width: '33%' }
            ],
            data: myData[index],
            onRegisterApi: function (gridApi) {
                $scope.gridApi = gridApi;
                gridApi.edit.on.afterCellEdit($scope, function (rowEntity, colDef, newValue, oldValue) {
                    $scope.msg[index] = 'Edited Ticker:' + rowEntity.ticker + ' Column:' + colDef.name + ' newValue:' + newValue + ' oldValue:' + oldValue;
                    $scope.$apply();
                })
            }
        }
    };
    for (i = 0; i < Object.keys($scope.myData).length; i++) {
        $scope.getGridOptions(i);
        console.log($scope.gridOptions[i]);
    };
    console.log($scope.gridOptions[1]);
};

var myData = [
        [{ ticker: 'TICKER', current_w: 5, new_w: 4, },
        { ticker: 'TICKER 2', current_w: 3, new_w: 2, },
        { ticker: 'TICKER 3', current_w: 7, new_w: 0, }],

        [{ ticker: 'TICKER', current_w: 5, new_w: 4, },
        { ticker: 'TICKER 2', current_w: 3, new_w: 2, },
        { ticker: 'TICKER 3', current_w: 7, new_w: 5, }]
];

来自

smoothHeight: true,

Answer 5

使用特定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>

固定尺寸的Flexslider

5 个答案: