jquery水平滑块空白问题答案

【问题标题】：jquery horizontal slider white space issuejquery水平滑块空白问题
【发布时间】：2016-08-08 10:24:42
【问题描述】：

我正在处理需要在水平滑块中显示多个产品块的项目。由于没有固定数量的产品，我给出了 div 的宽度 1360% 现在我面临的问题是，如果产品小于 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% 那么内容会重叠

jQuery

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

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

【问题讨论】：

最小宽度最大宽度可以帮助

标签： jquery css slider

【解决方案1】：

更改css：

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

【讨论】：

我当前的 css 使用相同的设置。但它不起作用。
在实时网址中应用这个？？
我做到了。没有任何效果。给我看你的工作演示屏幕截图

【解决方案2】：

查看图片以更改 css 类：

【讨论】：

你给我看的是幻灯片的第一阶段。你能把它滑到体验部分的最后一个产品，即 adlabs Imagica 那里你可以看到产品已经结束，但它仍然继续滑动，我想消除
嘿太阳，首先删除空白，然后显示您更改的 CSS