Question

我有一个带有3张图像的旋转木马，左边是一个文字部分。我想要发生的是左边的文本为每个图像改变（最好是平滑过渡），我将轮播数据间隔设置为假，这样只有当用户决定点击下一个/上一个时，文本才会改变旋转木马中的图像。我不确定如何做到这一点，这是我整个部分的代码：

<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改变了幻灯片＆＃39;活动到＆＃39; slide.bs.carousel＆＃39;。使用jquery，你可以这样做：

＆＃13;

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

＆＃13;

#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%;
}

＆＃13;

<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>

＆＃13;

更改轮播幻灯片后，在转盘外部更改引导元素

1 个答案: