将指标添加到轮播

Question

我有一个旋转木马设置。我需要在底部添加指示器以向用户显示他们所在的幻灯片。我已经读过使用bootstrap scrollspy可以工作，但尝试过它并没有成功。

我如何使用scrollspy？或者有更好的方法，以及如何？

Codepen

<ul class="slider">
    <li class="hideable" style="display: block;" id="section1">
        <img class="slide-img" src="http://placehold.it/100x100"/>
    </li>
    <li class="hideable"  id="section2">
        <img class="slide-img" src="http://placehold.it/200x100"/>
    </li>
    <li class="hideable"  id="section3">
        <img class="slide-img" src="http://placehold.it/300x100"/>
    </li>
    <li class="hideable"  id="section4">
        <img class="slide-img" src="http://placehold.it/400x100"/>
    </li>
    <li class="hideable">
        <img class="slide-img" src="http://placehold.it/500x100"/>
    </li>
    <li class="hideable">
        <img class="slide-img" src="http://placehold.it/600x100"/>
    </li>
</ul>
<ul class="nav navbar-nav">
    <li><a href="#section1">Section 1</a></li>
    <li><a href="#section2">Section 2</a></li>
    <li><a href="#section3">Section 3</a></li>
    <li><a href="#section4">Section 4</a></li>
</ul>

Answer 1

尝试使用carousel而不是滑块。