向旋转木马添加指示器

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

尝试使用旋转木马而不是滑动条。