3 
 <ol class="carousel-indicators">
 <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
 <li data-target="#carousel-example-generic" data-slide-to="1"></li>
 <li data-target="#carousel-example-generic" data-slide-to="2"></li>
 <li data-target="#carousel-example-generic" data-slide-to="3"></li>    
 <li data-target="#carousel-example-generic" data-slide-to="3"></li>    
 </ol>

这是我当前的轮播幻灯片下方的轮播点形式，我发现很难将其更改为幻灯片图像的缩略图版本。我可以知道我应该在我的正文页面或 bootstrap.js 中更改什么吗？

4

1 回答 1

3

carousel-indicators当轮播滑动时，您可以使用 jQuery 来更新一行缩略图，而不是更改现有的 ..

演示：http ://bootply.com/79859

<div class="container">

    <!-- thumb navigation carousel -->
    <div class="col-md-12 hidden-sm hidden-xs" id="slider-thumbs">

        <!-- thumb navigation carousel items -->
        <ul class="list-inline">
            <li>
                <a id="carousel-selector-0" class="selected">
                    <img src="http://placehold.it/80x60&amp;text=one" class="img-responsive">
                </a>
            </li>
            <li>
                <a id="carousel-selector-1">
                    <img src="http://placehold.it/80x60&amp;text=two" class="img-responsive">
                </a>
            </li>
            <li>
                <a id="carousel-selector-2">
                    <img src="http://placehold.it/80x60&amp;text=three" class="img-responsive">
                </a>
            </li>
            <li>
                <a id="carousel-selector-3">
                    <img src="http://placehold.it/80x60&amp;text=four" class="img-responsive">
                </a>
            </li>
            <li>
                <a id="carousel-selector-4">
                    <img src="http://placehold.it/80x60&amp;text=five" class="img-responsive">
                </a>
            </li>
            <li>
                <a id="carousel-selector-5">
                    <img src="http://placehold.it/80x60&amp;text=six" class="img-responsive">
                </a>
            </li>
            ... more thumbnails
        </ul>

    </div>


    <!-- main slider carousel -->
    <div class="row">
        <div class="col-md-12" id="slider">

            <div class="col-md-12" id="carousel-bounding-box">
                <div id="myCarousel" class="carousel slide">
                    <!-- main slider carousel items -->
                    <div class="carousel-inner">
                        <div class="active item" data-slide-number="0">
                            <img src="http://placehold.it/1200x480&amp;text=one" class="img-responsive">
                        </div>
                        <div class="item" data-slide-number="1">
                            <img src="http://placehold.it/1200x480/888/FFF" class="img-responsive">
                        </div>
                        <div class="item" data-slide-number="2">
                            <img src="http://placehold.it/1200x480&amp;text=three" class="img-responsive">
                        </div>
                        <div class="item" data-slide-number="3">
                            <img src="http://placehold.it/1200x480&amp;text=four" class="img-responsive">
                        </div>
                        <div class="item" data-slide-number="4">
                            <img src="http://placehold.it/1200x480&amp;text=five" class="img-responsive">
                        </div>
                        ... more items
                    </div>
                    <!-- main slider carousel nav controls --><a class="carousel-control left" href="#myCarousel" data-slide="prev">‹&lt;/a>

                    <a class="carousel-control right" href="#myCarousel" data-slide="next">›&lt;/a>
                </div>
            </div>

        </div>
    </div>
    <!--/main slider carousel-->
</div>

JS 可以使用 data-slide-to 属性来简化，而不是 jQuery 点击事件： http: //www.bootply.com/JiuFTQf9rI

于 2013-11-04T12:48:58.527 回答