基于bootstrap添加类其他元素.carousel-indicators li具有类活动

Question

嗨我现在使用bootstrap滑块来滑动元素，当滑块滑动时，我想要在另一个section元素中添加一个类。所以当.carousel-indicators li：nth-​​child（1）具有活动类而不是在.single-recent.first上添加活动类时，以及当.carousel-indicators li：nth-​​child（2）具有类活动时比在.single-recent.second上添加活动类并从.single-recent.first中删除活动类以及我拥有的任何其他所有.single-recent元素。并一次又一次地动态重复......但我没有成功。

以下是我使用的HTML代码：

<div id="launchgame-jumbotron-carousel" class="carousel slide carousel-fade work-carousel" data-ride="carousel">
        <ol class="carousel-indicators">
            <li data-target="#launchgame-jumbotron-carousel" data-slide-to="0" class="active"></li>
            <li data-target="#launchgame-jumbotron-carousel" data-slide-to="1"></li>
            <li data-target="#launchgame-jumbotron-carousel" data-slide-to="2"></li>
            <li data-target="#launchgame-jumbotron-carousel" data-slide-to="3"></li>
        </ol>

        <div class="carousel-inner" role="listbox">
            <div class="item active">               
                <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat quia fuga, velit iure dolorum perferendis!</p>
            </div>

            <div class="item">                 
                <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat quia fuga, velit iure dolorum perferendis!</p>
            </div>

            <div class="item">                  
                <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat quia fuga, velit iure dolorum perferendis!</p>
            </div>


            <div class="item">   
                <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat quia fuga, velit iure dolorum perferendis!</p>
            </div>


        </div>


        <a class="left jumbotron-control" href="#launchgame-jumbotron-carousel" role="button" data-slide="prev"><i class="fa fa-angle-left"></i></a>
        <a class="right jumbotron-control" href="#launchgame-jumbotron-carousel" role="button" data-slide="next"><i class="fa fa-angle-right"></i></a>  

    </div>


    <section id="recent-featured" class="recent-featured-area">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">

                    <div class="recent-featured-wrap">

                        <h3>Featured Work</h3>

                        <div class="single-recent first">
                            <div class="single-inner-img">
                                <img src="img/work/featured/featured-01.jpg" alt="">
                            </div>
                            <div class="single-active-effect">
                                <i class="fa fa-eye" aria-hidden="true"></i>
                            </div>
                        </div>

                        <div class="single-recent second">
                            <div class="single-inner-img">
                                <img src="img/work/featured/featured-02.jpg" alt="">
                            </div>
                            <div class="single-active-effect">
                                <i class="fa fa-eye" aria-hidden="true"></i>
                            </div>
                        </div>

                        <div class="single-recent third">
                            <div class="single-inner-img">
                                <img src="img/work/featured/featured-03.jpg" alt="">
                            </div>
                            <div class="single-active-effect">
                                <i class="fa fa-eye" aria-hidden="true"></i>
                            </div>
                        </div>

                        <div class="single-recent fourth">
                            <div class="single-inner-img">
                                <img src="img/work/featured/featured-04.jpg" alt="">
                            </div>
                            <div class="single-active-effect">
                                <i class="fa fa-eye" aria-hidden="true"></i>
                            </div>
                        </div>

                    </div>

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

和jQuery：

jQuery(document).ready(function(){

if ($("#launchgame-jumbotron-carousel ol.carousel-indicators li:nth-child(1)").hasClass('active')) {
  $(".single-recent.first").addClass('active');
  $(".single-recent.second").removeClass('active');
  $(".single-recent.third").removeClass('active');
  $(".single-recent.fourth").removeClass('active');
}

if ("#launchgame-jumbotron-carousel ol.carousel-indicators li:nth-child(2)").hasClass('active') {
  $(".single-recent.second").addClass('active');
  $(".single-recent.first").removeClass('active');
  $(".single-recent.third").removeClass('active');
  $(".single-recent.fourth").removeClass('active');
}

if ($("#launchgame-jumbotron-carousel ol.carousel-indicators li:nth-child(3)").hasClass('active')) {
  $(".single-recent.third").addClass('active');
  $(".single-recent.first").removeClass('active');
  $(".single-recent.second").removeClass('active');
  $(".single-recent.fourth").removeClass('active');
}

if ($("#launchgame-jumbotron-carousel ol.carousel-indicators li:nth-child(4)").hasClass('active')) {
  $(".single-recent.fourth").addClass('active');
  $(".single-recent.first").removeClass('active');
  $(".single-recent.second").removeClass('active');
  $(".single-recent.third").removeClass('active');
} });

请帮我找一个方法......