Javascript 回流黑客的引导列（创建类似netflix的水平滑块）

我正在尝试用引导和css重新创建netflix水平滑块/旋转木马，如下所示：

我还没有设置css转换/动画，但我已经使用宽度调整使元素在不回流的情况下重复。我计划使用javascript重复这些元素，并使容器的宽度仅与内部元素的宽度相同。这是我的代码：

html

这是一种超级jank方法吗？我对网络开发不是很有经验

<div class="container">
<div class="row">
    <div class="col-xs-2 hero-unit">
        <h1>Bootstrap jsFiddle Skeleton</h1>
        <p>Fork this fiddle to test your Bootstrap stuff.</p>
    </div>
    <div class="hero-unit col-xs-2">
        <h1>Bootstrap jsFiddle Skeleton</h1>
        <p>Fork this fiddle to test your Bootstrap stuff.</p>
    </div>
    <div class="hero-unit col-xs-2">
        <h1>Bootstrap jsFiddle Skeleton</h1>
        <p>Fork this fiddle to test your Bootstrap stuff.</p>
    </div>
    <div class="hero-unit col-xs-2">
        <h1>Bootstrap jsFiddle Skeleton</h1>
        <p>Fork this fiddle to test your Bootstrap stuff.</p>
    </div>
    <div class="hero-unit col-xs-2">
        <h1>Bootstrap jsFiddle Skeleton</h1>
        <p>Fork this fiddle to test your Bootstrap stuff.</p>
    </div>
    <div class="hero-unit col-xs-2">
        <h1>Bootstrap jsFiddle Skeleton</h1>
        <p>Fork this fiddle to test your Bootstrap stuff.</p>
    </div>    
</div>
</diV>

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');

.container{
    height: 150px;
    background: grey;
    width: 500%
}
.hero-unit {
    display:inline-block;
    background-color:red;
    height: 100px;
}