Как добавить автопрокрутку внутри класса миниатюр начальной загрузки

Я создаю индикаторы выполнения. Я хочу показать первые три индикатора выполнения и скрыть следующие два, и у меня должна появиться возможность видеть индикатор прогресса 4 и 5 после прокрутки миниатюры. Вот мой пример JSFIDDLE HTML и 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>

Источник

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

код здесь

Источник
Другие вопросы по тегам