Question

我想在列表处于活动状态时更改列表。默认情况下，我的轮播将在特定时间自动移动，当它移动时，相应的列表class应为active，并且该颜色应自动更改。

这是我的代码：

<div class="container">
    <div class="row">
        <div id="myCarousel" class="carousel slide" data-ride="carousel">
            <div class="carousel-inner">
                <div class="item active">
                    <img src="images/blue.jpg">
                        <div class="container">
                            <div class="carousel-caption">
                            </div>
                        </div>
                </div>
                <div class="item">
                    <img src="images/purple.jpg">
                    <div class="container">
                        <div class="carousel-caption">

                        </div>
                    </div>
                </div>
                <div class="item">
                    <img src="images/red.jpg">
                    <div class="container">
                        <div class="carousel-caption">

                        </div>
                    </div>
                </div>
                <div class="item">
                    <img src="http://placehold.it/1694x1131/777">
                    <div class="container">
                    <div class="carousel-caption">

                    </div>
                </div>
            </div>


            </div>

            <div class="carousel-buttons">
                <div class="col-xs-3 text-center" style="background-color:orange;height:50px; padding:10px;"><a class="active" data-target="#myCarousel"  data-slide-to="0" href="#">TECHNOLOGY</a></div>

                <div class="col-xs-3 text-center" style="background-color:orange;height:50px; padding:10px;"><a data-target="#myCarousel" data-slide-to="1" href="#">TRADING</a></div>

                <div class="col-xs-3 text-center" style="background-color:orange;height:50px; padding:10px;"><a data-target="#myCarousel" data-slide-to="2" href="#">CONTRACTING</a></div>

                <div class="col-xs-3 text-center" style="background-color:orange;height:50px; padding:10px;"><a data-target="#myCarousel" data-slide-to="3" href="#">TRAFFIC</a></div>
            </div>    

        </div>


    </div>
</div>

第一张照片是技术，2。交易，3。承包，4。交通

当轮播移动时，它不会自动设置class="active"。

这些链接应该像carousel-indicator一样工作

Answer 1

使用class =＆＃34; carousel-indicators＆＃34;而不是class =＆＃34; carousel-buttons＆＃34;。所以＆＃34;活跃＆＃34;会自动改变。

如何在轮播自动移动时设置活动列表样式？

1 个答案: