javascript - 来自回流黑客的引导列（创建像水平滑块一样的 netflix）

Question

我正在尝试使用 bootstrap 和 css 重新创建 netflix 水平滑块/轮播，如下所示： http: //media.idownloadblog.com/wp-content/uploads/2013/08/Netflix-My-List-web-screenshot-002 .jpg

我还没有设置 css 过渡/动画，但我已经让元素重复而不使用宽度 hack 重排。我计划使用 javascript 来重复元素并使容器的宽度仅与内部元素一样宽。这是我的代码：http: //jsfiddle.net/MgcDU/7541/

html

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

css

@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;
}

这是超级垃圾方法吗？我在Web开发方面不是很有经验。