jquery水平 slider 空白问题

Question

我正在做一个元素，我需要在水平 slider 中显示多个产品 block 。由于没有固定数量的产品，我已经给出了 1360% 的 div 宽度，现在我面临的问题是，如果产品少于 div 中显示的空白，这很明显是 1360% 的 div 大小。如果我保持 div auto 的宽度，那么设计结构就会困惑。我怎样才能避免这个空白？

现场链接 - http://foxboxretail.in/

CSS

.common-blocks {
    width: 100%;
    width: 1366%;
    overflow: hidden;
    height: auto;
    transition: all 0.5s;
    margin-left: 0px;
}

在上面的 css 中，如果我保持 width auto & max-width:1360% 那么内容就会重叠

查询

<script>
        var registerEvents = function () {
            $(".next").off("click").on("click", function (event) {
                if ($(this).hasClass('disable')) return;
                $(this).addClass('disable');
                window.setTimeout(function () {
                    $(event.target).removeClass('disable');
                }, 510);
                var targetBlock = $(event.target).parents().children(".common-blocks");
                var leftMargin = parseInt(targetBlock.css("marginLeft") || 0);
                var numberOfBlocks = targetBlock.children(".blocks").length; //    Total Number of blocks 
                var displayCount = 3;//Number of blocks displaying at a time
                if (leftMargin <= (numberOfBlocks - displayCount) * (-1024))  // -300 width   of    block in left direction
                    return;
                targetBlock.css("marginLeft", parseInt(leftMargin - 1024) + "px")
            });
            $(".prev").off("click").on("click", function (event) {
                if ($(this).hasClass('disable')) return;
                $(this).addClass('disable');
                window.setTimeout(function () {
                    $(event.target).removeClass('disable');
                }, 510);
                var targetBlock = $(event.target).parents().children(".common-blocks");
                var leftMargin = parseInt(targetBlock.css("marginLeft") || 0);
                if (leftMargin == 0)
                    return;
                targetBlock.css("marginLeft", parseInt(leftMargin + 1024) + "px")
            });

        }();
    </script>

因为它是动态内容，所以我无法显示标记，因为代码变长了

Answer 1

改变样式:

.blocks {
    width: 100% !important;
    max-width: 249px !important;
    margin: 5px 0px 0 1px;
}