更换旋转木马幻灯片时，引导在旋转木马外更改元素

Question

我有一个带有 3 张图片的轮播，左侧有一个文本部分。 我想要发生的是每个图像左侧的文本都会发生变化（最好是平滑过渡），我将轮播数据间隔设置为 false，这样只有当用户决定单击下一个/上一个时，文本才会改变轮播中的图像。我不太确定该怎么做，这是我整个部分的代码：

<div id="sport" class="sportInfo">

        <div class="row">

            <div class="col-sm-4">
                <div class="sportLabel">
                    SPORT
                </div> 
                <div class="sportText">
                    Long paragraph of text that you see on the left
                </div>    
            </div>    

            <div class="col-sm-8">
                <div class="sportCarousel">

                    <!-- CAROUSEL ==============================================-->
                    <div id="myCarousel1" class="carousel slide" data-ride="carousel" data-interval="false">

                    <!-- Indicators -->
                        <ol class="carousel-indicators">
                            <li data-target="#myCarousel1" data-slide-to="0" class="active"></li>
                            <li data-target="#myCarousel1" data-slide-to="1"></li>
                            <li data-target="#myCarousel1" data-slide-to="2"></li>
                        </ol>

                        <!-- Wrapper for slides -->
                        <div class="carousel-inner" role="listbox">
                            <div class="item active">
                                <img src="Resources/Images/img1.png" alt="img1">
                            </div>
                            <div class="item">
                                <img src="Resources/Images/img2.jpg" alt="img2">
                            </div>
                            <div class="item">
                                <img src="Resources/Images/img3.png" alt="img3">
                            </div> 
                        </div>

                        <!-- Left and right controls -->
                        <a class="left carousel-control" href="#myCarousel1" role="button" data-slide="prev">
                            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                            <span class="sr-only">Previous</span>
                        </a>
                        <a class="right carousel-control" href="#myCarousel1" role="button" data-slide="next">
                            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                            <span class="sr-only">Next</span>
                        </a>

                    </div>
                </div>

                <!-- END OF CAROUSEL =======================================-->

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

不要认为它是相关的，但这是您在该行中看到的类的 CSS：

.sportInfo {
    font-family: ciclefina, sans-serif;
    background-color: #373737;
    color: #e2e2e2;
    text-align: justify;
}

.sportLabel{
    font-family: ciclegordita, sans-serif;
    font-size: 300%;
    color: #b1b1b1;
    text-align: center;
    padding: 30px 0 0 30px;
}

.sportText{
    font-family: open_sanslight, sans-serif;
    font-size: 14px ;
    color: #e2e2e2;
    text-align: justify;
    padding-top: 30px;
    padding-left: 30px;
}

.sportCarousel{
    position: relative;
    padding: 0;
    top: -50px;
    height: 100%;
}

我的预感是我需要一个 jQuery 函数来检测幻灯片何时发生更改、它已更改为哪张幻灯片以及该特定幻灯片左侧显示的正确文本，尽管我非常卡住所以任何帮助将不胜感激，谢谢。

Answer 1

Bootstrap 3 将 'slide' 事件更改为 'slide.bs.carousel'。使用 jquery 你可以做到这一点：

$('#myCarousel1').bind('slide.bs.carousel', function (e) {
    alert('slide event!');
});

#sport{width:100%;}
.sportInfo {
    font-family: ciclefina, sans-serif;
    background-color: #373737;
    color: #e2e2e2;
    text-align: justify;
}

.sportLabel{
    font-family: ciclegordita, sans-serif;
    font-size: 300%;
    color: #b1b1b1;
    text-align: center;
    padding: 30px 0 0 30px;
}

.sportText{
    font-family: open_sanslight, sans-serif;
    font-size: 14px ;
    color: #e2e2e2;
    text-align: justify;
    padding-top: 30px;
    padding-left: 30px;
}

.sportCarousel{
    position: relative;
    padding: 0;
    top: -50px;
    height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="sport" class="sportInfo">

        <div class="row">

            <div class="col-sm-4">
                <div class="sportLabel">
                    SPORT
                </div> 
                <div class="sportText">
                    Long paragraph of text that you see on the left
                </div>    
            </div>    

            <div class="col-sm-8">
                <div class="sportCarousel">

                    <!-- CAROUSEL ==============================================-->
                    <div id="myCarousel1" class="carousel slide" data-ride="carousel" data-interval="false">

                    <!-- Indicators -->
                        <ol class="carousel-indicators">
                            <li data-target="#myCarousel1" data-slide-to="0" class="active"></li>
                            <li data-target="#myCarousel1" data-slide-to="1"></li>
                            <li data-target="#myCarousel1" data-slide-to="2"></li>
                        </ol>

                        <!-- Wrapper for slides -->
                        <div class="carousel-inner" role="listbox">
                            <div class="item active">
                                <img src="http://artofabsence.com/wp-content/uploads/2012/09/camel-ride1.jpg" alt="img1">
                            </div>
                            <div class="item">
                                <img src="http://artofabsence.com/wp-content/uploads/2012/09/camel-ride1.jpg" alt="img2">
                            </div>
                            <div class="item">
                                <img src="http://artofabsence.com/wp-content/uploads/2012/09/camel-ride1.jpg" alt="img3">
                            </div> 
                        </div>

                        <!-- Left and right controls -->
                        <a class="left carousel-control" href="#myCarousel1" role="button" data-slide="prev">
                            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                            <span class="sr-only">Previous</span>
                        </a>
                        <a class="right carousel-control" href="#myCarousel1" role="button" data-slide="next">
                            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                            <span class="sr-only">Next</span>
                        </a>

                    </div>
                </div>

                <!-- END OF CAROUSEL =======================================-->

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