如何使用bootstrap轮播在不同的断点（xs，sm，md，lg）中显示多个活动项？

Question

我试图在桌面上连续显示10张图片，在平板电脑中连续显示5张图片，点击下一步按钮我想显示剩余的5张图片。在手机中，我想要显示一张图像。< / p>

但问题是当我点击平板电脑视图中的下一个按钮时，它不起作用而不显示下一组图像。

我正在尝试在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();
    });

代码：

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

任何人都可以帮忙吗？提前谢谢！