Начальная замена сменного элемента вне карусели при смене слайдов карусели

L Jones спросил: 13 октября 2017 в 06:47 в: jquery

У меня есть карусель с 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, чтобы определить, когда слайд изменился, на какой слайд он был изменен, и правильный текст показать слева для этого конкретного слайда, хотя я довольно застрял, поэтому любая помощь будет оценена, спасибо.

0 ответов