如何在引导缩略图类中添加自动滚动答案

【问题标题】：How to add auto scroll inside bootstrap thumbnail class如何在引导缩略图类中添加自动滚动
【发布时间】：2015-03-20 22:50:44
【问题描述】：

我正在创建一个进度条。我想显示前三个进度条并隐藏接下来的两个，滚动缩略图后我应该能够看到主题 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>

【问题讨论】：

标签： html css twitter-bootstrap thumbnails autoscroll

【解决方案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

【讨论】：