Javascript 设计一个7列的周计划，水平滚动

我试图设计一个周计划，显示一周中的三天：今天在中间，昨天在左边，明天在右边。但我希望它能在下一天和前一天进行更改，以便单击“下一天”将花费或滚动到（3个面板始终显示）一组新的3天

say today is Friday
3 columns showing by default
Left: Thursday
Middle: Today= Friday
Right: Saturday

when user click previous
Left: wednesday
Middle: Thursday
Right: friday

使用引导

HTML

---

这是一个非常基本的三张幻灯片旋转木马示例，根据需要添加更多幻灯片，由于insertBefore和insertAfter，它可以循环播放。如果您想要一些动画，请尝试在移动之前隐藏它，然后在移动后显示它

（）

HTML

JAVASCRIPT

$("#next").on("click",function(){
    parent =  $(this).parent();
    parent.find(".item:first").insertAfter(parent.find(".item:last"));
});
$("#previous").on("click",function(){
    parent =  $(this).parent();
    parent.find(".item:last").insertBefore(parent.find(".item:first"));
});

---

@humble.rumble.6x3我不希望屏幕水平滚动，但更像分页中的下一个或上一个，但不更改为新的htmlhank you very@humble.rumble.6x3我正在使用bootstrap3，我在3列中使用col-md-4，但在总共7个项目中，有4项必须使用隐藏。上面的例子帮助很大，需要查看引导列行为+jquery以隐藏/显示和前后

body {
    padding-top: 50px;
}
.footer {
    padding-top: 40px;
    padding-bottom: 40px;
    margin-top: 40px;
    border-top: 1px solid #eee;
}
.col-md-4{
    border:1px solid #e0e0e0;

}
#weekplan {
    display: table;
    white-space: nowrap;
}
#weekplan .eh {
    float: none;
    display: table-cell;
    vertical-align: top;
    display: inline-block;
}
.panel-heading h3{
    text-align: center;
}

<div class="wrap">
    <div class="carousel">
        <div class="item">
            1
        </div>
        <div class="item">
            2
        </div>
        <div class="item">
            3
        </div>
        <div class="item">
            4
        </div>
    </div>
    <a href="javascript:void()" id="previous"><</a>
    <a href="javascript:void()" id="next">></a>
</div>

.wrap {
    position: relative;
}
.carousel {
    font-size: 0;
    overflow: hidden;
    white-space: nowrap;
}
.item {
    font-size: initial;
    width: 33.3333%;
    display: inline-block;
}
.item:
#previous {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}
#next {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

$("#next").on("click",function(){
    parent =  $(this).parent();
    parent.find(".item:first").insertAfter(parent.find(".item:last"));
});
$("#previous").on("click",function(){
    parent =  $(this).parent();
    parent.find(".item:last").insertBefore(parent.find(".item:first"));
});