如何在 bootstrap 缩略图 class 内添加自动滚动

Question

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

<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

如何在 bootstrap 缩略图 class 内添加自动滚动

How to add auto scroll inside bootstrap thumbnail class

html

css

twitter-bootstrap

thumbnails

autoscroll