Jquery 如何使用引导转盘在不同断点（xs、sm、md、lg）显示多个活动项？

我试图在桌面上一行显示10幅图像，在平板电脑上一行显示5幅图像，单击“下一步”按钮，我想显示其余5幅图像。在手机中，我想一次显示一幅图像

但问题是，当我在tablet视图中单击“下一步”按钮时，它不起作用，并且不会显示下一组图像

我正在尝试向jquery中的div添加活动类

这是我的密码

脚本：

$(document).ready(function () {
        if ($(window).width() < 768) {

            $('[id^="icon_FirstSet_"]').removeClass('active');
            $('[id^="icon_SecSet_"]').removeClass('active');
            $('#icon_FirstSet_1').addClass('active');

            //  small screens
        }
        else if ($(window).width() >= 768 && $(window).width() <= 992) {

            $('[id^="icon_FirstSet_"]').removeClass('active');
            $('[id^="icon_SecSet_"]').removeClass('active');
            $('[id^="icon_FirstSet_"]').addClass('active');
          //medium screens


        }
        else if ($(window).width() > 992 && $(window).width() <= 1200) {

            $('[id^="icon_FirstSet_"]').removeClass('active');
            $('[id^="icon_SecSet_"]').removeClass('active');
            $('[id^="icon_FirstSet_"]').addClass('active');
            $('[id^="icon_SecSet_"]').addClass('active');
            //  big screens
        }
        else {

            $('[id^="icon_FirstSet_"]').removeClass('active');
            $('[id^="icon_SecSet_"]').removeClass('active');
            $('[id^="icon_FirstSet_"]').addClass('active');
            $('[id^="icon_SecSet_"]').addClass('active');
            // huge screens
        }


        $('.carousel').carousel();
    });

$（文档）.ready（函数（）{
如果（$（窗口）.width（）<768）{
$（'[id^=“icon\u FirstSet\u”]'）。removeClass（'active'）；
$（'[id^=“icon\u SecSet\u”]'）。removeClass（'active'）；
$（'#icon_FirstSet_1'）.addClass（'active'）；
//小屏幕
}
如果（$（窗口）.width（）>=768&&$（窗口）.width（）992&&$（窗口）.width（））
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <!-- Wrapper for slides -->
    <div class="carousel-inner " role="listbox">


        <div class="item" id="icon_FirstSet_1">
            <div class="col-lg-1 col-md-1  col-sm-2 col-xs-12  "  >
                <div id="divslide1" >
                    <a id="lnkslide1" href="#lnkslide1">
                        <div>
                            <img id="imgslide1" src="~/Content/Images/App/Onslide1.png" />
                        </div>

                    </a>
                </div>
            </div>
            </div>
        <div class="item" id="icon_FirstSet_2">
            <div class="col-lg-1 col-md-1  col-sm-2 col-xs-12 ">
                <a id="lnkslide2" href="#lnkslide2">
                    <div>
                        <img id="imgslide2" src="~/Content/Images/App/slide2.png" />
                    </div>

                </a>
            </div>
            </div>
        <div class="item" id="icon_FirstSet_3">
            <div class="col-lg-1 col-md-1  col-sm-2 col-xs-12 ">
                <a id="lnkslide3" href="#lnkslide3">
                    <div>
                        <img id="imgSlide3" src="~/Content/Images/App/Slide3.png" />
                    </div>

                </a>
            </div>
            </div>
        <div class="item" id="icon_FirstSet_4">
            <div class="col-lg-1 col-md-1  col-sm-2 col-xs-12 ">
                <a id="lnkslide4" href="#lnkslide4">
                    <div>
                        <img id="imgslide4" src="~/Content/Images/App/slide4.png" />
                    </div>

                </a>
            </div>
            </div>
        <div class="item" id="icon_FirstSet_5">
            <div class="col-lg-1 col-md-1  col-sm-2 col-xs-12 ">
                <a id="lnkslide5" href="#lnkslide5">
                    <div>
                        <img id="imgslide5" src="~/Content/Images/App/slide5.png" />
                    </div>

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



        <div class="item" id="icon_SecondSet">

            <div class="item" id="icon_SecondSet_1">
                <div class="col-lg-1 col-md-1  col-sm-1 col-xs-12 ">
                    <a id="lnkslide6" href="#lnkslide6">
                        <div>
                            <img id="imgslide6" src="~/Content/Images/App/slide6.png" />
                        </div>

                    </a>
                </div>
            </div>
            <div class="item" id="icon_SecondSet_2">
                <div class="col-lg-1 col-md-1  col-sm-2 col-xs-12 ">
                    <a id="lnkslide7" href="#lnkslide7">
                        <div>
                            <img id="imgslide6" src="~/Content/Images/App/slide7.png" />
                        </div>

                    </a>
                </div>
             </div>
            <div class="item" id="icon_SecondSet_3">
                <div class="col-lg-1 col-md-1  col-sm-2 col-xs-12 ">
                    <a id="lnkslide8" href="#lnkslide8">
                        <div>
                            <img id="imgslide8" src="~/Content/Images/App/slide8.png" />
                        </div>

                    </a>
                </div>
                </div>
            <div class="item" id="icon_SecondSet_4">
                <div class="col-lg-1 col-md-1  col-sm-2 col-xs-12 ">
                    <a id="lnkslide9" href="#lnkslide9">
                        <div>
                            <img id="imgslide9" src="~/Content/Images/App/slide9.png" />
                        </div>

                    </a>
                </div>
                </div>
            <div class="item" id="icon_SecondSet_4">
                <div class="col-lg-1 col-md-1  col-sm-2 col-xs-12 ">
                    <a id="lnkslide10" href="#lnkslide10">
                        <div>
                            <img id="imgslide10" src="~/Content/Images/App/slide10.png" />
                        </div>

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


    <!-- Controls -->
    <a class="left carousel-control" href="#carousel-example-generic" 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="#carousel-example-generic" role="button" data-slide="next" >
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
            </div>
</div>
    </div>