javascript - 如何让额外的 div block 充当 slider

Question

我的 bootstrap 3 页面在第一次页面加载时仅显示一个 div。当我单击“打开下一个 block ”按钮时，会显示另一个 div，如果我单击第二个 div，则会显示第三个 div。这样我总共可以显示 6 个 div。 <强> FIDDLE

问题是当超过 3 个 div 时，它会转到我不想要的第二行。我正在尝试将其作为 slider 来工作。当有超过 3 个 div block 时，是否可以使最左边的 div block 隐藏并显示新的 div block ？就像如果 div 4 显示 div 1 隐藏一样，如果 div 5 显示 div 2 隐藏？

另外，当我单击向左箭头按钮时，左侧 div block 将一一显示，右侧 div 隐藏？主要是它应该作为一个 slider 进行一一移动。

当前 jQuery:

$("#block-1").click(function() {
    $('#block-2').show();
});
$("#block-2").click(function() {
    $('#block-3').show();
});
$("#block-3").click(function() {
    $('#block-4').show();
});
$("#block-4").click(function() {
    $('#block-5').show();
});
$("#block-5").click(function() {
    $('#block-6').show();
});

我很抱歉英语不好，提前致谢。

Answer 1

引导行只有十二列。如果将每个 block 的宽度设置为四列，则每行只能有三个。将它们的列更改为 2，使六列连续。这个

col-xs-4 col-sm-4 col-sm-4 col-md-4 col-lg-4

需要

col-xs-2 col-sm-2 col-sm-2 col-md-2 col-lg-2

对于 slider ，有更好的方法可以做到这一点，但这就是您想要的吗？增加一个变量来跟踪您所在的 block ，然后使用后退按钮关闭该 block 。

http://jsfiddle.net/Lq07ysbq/19/