如何在bootstrap缩略图类中添加自动滚动

Question

我正在创建进度条。我想显示前三个进度条并隐藏下两个，我应该能够在滚动缩略图后看到主题4和主题5进度条。 这是我的HTML和CSS的JSFIDDLE Sample。

<div class="container">
<div class="row">                   
    <div class="thumbnail">
        <div class="thumbnail">
            <img class="small-image" src="http://marccortez.com/wp-content/uploads/2013/04/reading-small1.jpg"/> 
        </div>
        <div class="thumbnail">
            <div class="progress-broad">
                <div class="progress-bar progress-bar-success" style="width:70%">
                </div> 
                <div class="progress-bar progress-bar-warning progress-bar-striped" style="width:10%">                                            
                </div>
                <span class="course-progressbar-name">Mathematics</span>
                <span class="course-grade-percentage">60%</span>
                <span class="course-grade-label">GRADE</span>     
            </div>
            <div class="progress-broad">
                <div class="progress-bar progress-bar-success" style="width:70%">
                </div> 
                <div class="progress-bar progress-bar-warning progress-bar-striped" style="width:10%">                                            
                </div>
                <span class="course-progressbar-name">Biology</span>
                <span class="course-grade-percentage">60%</span>
                <span class="course-grade-label">GRADE</span>     
            </div>
            <div class="progress-broad">
                <div class="progress-bar progress-bar-success" style="width:70%">
                </div> 
                <div class="progress-bar progress-bar-warning progress-bar-striped" style="width:10%">                                            
                </div>
                <span class="course-progressbar-name">Physics</span>
                <span class="course-grade-percentage">60%</span>
                <span class="course-grade-label">GRADE</span>     
            </div>
            <div class="progress-broad">
                <div class="progress-bar progress-bar-success" style="width:70%">
                </div> 
                <div class="progress-bar progress-bar-warning progress-bar-striped" style="width:10%">                                            
                </div>
                <span class="course-progressbar-name">subject4</span>
                <span class="course-grade-percentage">60%</span>
                <span class="course-grade-label">GRADE</span>     
                </div>
            <div class="progress-broad">
                <div class="progress-bar progress-bar-success" style="width:70%">
                </div> 
                <div class="progress-bar progress-bar-warning progress-bar-striped" style="width:10%">                                            
                </div>
                <span class="course-progressbar-name">subject5</span>
                <span class="course-grade-percentage">60%</span>
                <span class="course-grade-label">GRADE</span>     
            </div>
        </div>
    </div> 
</div>

Answer 1

试试这个

<div class="container">
<div class="row">                   
    <div class="thumbnail">
        <div class="thumbnail">
            <img class="small-image" src="http://marccortez.com/wp-content/uploads/2013/04/reading-small1.jpg"/> 
        </div>
        <div class="thumbnail editor">
            <div class="progress-broad">
                <div class="progress-bar progress-bar-success" style="width:70%">
                </div> 
                <div class="progress-bar progress-bar-warning progress-bar-striped" style="width:10%">                                            
                </div>
                <span class="course-progressbar-name">Mathematics</span>
                <span class="course-grade-percentage">60%</span>
                <span class="course-grade-label">GRADE</span>     
            </div>
            <div class="progress-broad">
                <div class="progress-bar progress-bar-success" style="width:70%">
                </div> 
                <div class="progress-bar progress-bar-warning progress-bar-striped" style="width:10%">                                            
                </div>
                <span class="course-progressbar-name">Biology</span>
                <span class="course-grade-percentage">60%</span>
                <span class="course-grade-label">GRADE</span>     
            </div>
            <div class="progress-broad">
                <div class="progress-bar progress-bar-success" style="width:70%">
                </div> 
                <div class="progress-bar progress-bar-warning progress-bar-striped" style="width:10%">                                            
                </div>
                <span class="course-progressbar-name">Physics</span>
                <span class="course-grade-percentage">60%</span>
                <span class="course-grade-label">GRADE</span>     
            </div>
            <div class="progress-broad">
                <div class="progress-bar progress-bar-success" style="width:70%">
                </div> 
                <div class="progress-bar progress-bar-warning progress-bar-striped" style="width:10%">                                            
                </div>
                <span class="course-progressbar-name">subject4</span>
                <span class="course-grade-percentage">60%</span>
                <span class="course-grade-label">GRADE</span>     
                </div>
            <div class="progress-broad">
                <div class="progress-bar progress-bar-success" style="width:70%">
                </div> 
                <div class="progress-bar progress-bar-warning progress-bar-striped" style="width:10%">                                            
                </div>
                <span class="course-progressbar-name">subject5</span>
                <span class="course-grade-percentage">60%</span>
                <span class="course-grade-label">GRADE</span>     
            </div>
        </div>
    </div> 
</div>

我添加了额外的css：

.editor{
    height: 190px;
    overflow-y: visible;
    overflow-x:hidden;
    width: 100%;
}
.progress-broad{
    position:relative;
}

code here