Bootstrap Carousel响应窗口大小在一张幻灯片上的多个项目

Question

我正在尝试创建一个bootstrap轮播，其中以全窗口大小查看将一次显示和滑动多个项目。当窗口重新调整大小时，显示的项目数也将改变。要滑动的项目数取决于显示的项目数。

受此模板中的轮播/滑块的启发：https://mail.google.com/mail/?authuser=your.email.address@gmail.com#all/138d85da096d2126

到目前为止，我有一个代码可以一次显示和滑动多个项目（5）。使用CSS @media可以实现这一点。但是，当我调整窗口大小时，显示的项目数量会发生变化，但仍会滑动5个项目（默认的项目活动数量）。

<?php

function getNew(){
   $results = array();

for($z=0; $z<10;$z++) {
   //.... content
}

//js scripts
echo '<script src="js/jquery-1.11.3.min.js"></script>';
echo '<script src="js/bootstrap.min.js"></script>';

//carousel
echo'<div class="container">'; //carousel main container
echo '<div id="Carousel" class="carousel slide">'; //Carousel slide
echo '<div class="carousel-inner id="carouselCont">'; //carousel-inner

$numb = 1;
$flag = 1;

if(isset($results) && $results >0) {

       // listing of newest entry
    for ($i=0;$i<sizeof($results);$i++){

        $rs = $results[$i];

        if ($rs){

            if ($numb == 1 ){
            if ($flag == 1){
                echo '<div class = "item active">';
            }
            else {
                echo '<div class = "item">';
            }

            $link = './image/999999999999'.$i.".jpg";

            echo '<div class = "col-xs-12 col-sm-4 col-md-2">';
            echo '<a href="'.$link.'"><div >';
            //.... content                
            echo '</div></a>'; //end of div

        }
        elseif ($numb == 5){

            $link = './image/999999999999'.$i.".jpg";

            echo '<div class = "col-xs-12 col-sm-4 col-md-2">';
            echo '<a href="'.$link.'"><div>';
            //.... content

            echo '</div></a>'; //end of div

            $numb = 0;
            echo '</div>'; //end of item every 5 slides
        }

        else{
            $link = './image/999999999999'.$i.".jpg";

            echo '<div class = "col-xs-12 col-sm-4 col-md-2">';

            echo '<a href="'.$link.'"><div>';
            //..... content
            echo '</div></a>'; //end of div
        }

        $numb++;
        $flag++;
       }

       echo '</div>'; //end of item
   }
}

echo '</div>'; //end of carousel-inner

echo '</div>'; //end of <div id="Carousel" class="carousel slide">

//carousel-control (left and right)
echo '<a class="left carousel-control" href="#Carousel" data-slide="prev">
        <span class="icon-prev"></span>
    </a>';
echo '<a class="right carousel-control" href="#Carousel" data-slide="next">
        <span class="icon-next"></span></a>';

echo '</div>'; // end of <div id="container">

echo '<script type="text/javascript">
$(document).ready(function() {

//stop autoplay
$("#Carousel").carousel({
    interval: false
    })

    activeOnResize();       
});
</script>';

echo '<script type="text/javascript">
    activeOnResize();
    window.addEventListener("resize", activeOnResize);

    function activeOnResize(){
        //window width
        var windowWidth = $(window).innerWidth();

        $(".carousel-inner .item").removeClass("active");

        //5 SLIDES
        if (windowWidth > 1200){

            $(".carousel-inner .item:nth-child(2)").addClass("active");
            $(".carousel-inner .item:nth-child(3)").addClass("active");
            $(".carousel-inner .item:nth-child(4)").addClass("active");
            $(".carousel-inner .item:nth-child(5)").addClass("active");

        }
        //4 SLIDES
        elseif ((windowWidth < 1200) && (windowWidth >= 991)){
            $(".carousel-inner .item:nth-child(2)").addClass("active");
            $(".carousel-inner .item:nth-child(3)").addClass("active");
            $(".carousel-inner .item:nth-child(4)").addClass("active");
        }
        //3 SLIDES
        elseif ((windowWidth < 990) && (windowWidth >= 750)){
            $(".carousel-inner .item:nth-child(2)").addClass("active");
            $(".carousel-inner .item:nth-child(3)").addClass("active");
        }   

        else{
            $(".carousel-inner .item:nth-child(2)").addClass("active");
        }         
    }
</script>';
}
?>

我正在使用上面的脚本删除现有的项活动类，并检测窗口大小，该大小决定将其类更改为活动类的项数。但是，如果没有自定义CSS @media的帮助，它不会响应并显示空白。我担心它不会进入窗口大小的if-else条件并改变上面的类。

是否可以创建一个响应式引导程序轮播，在jQuery或javascript的帮助下一次性滑动多个项目？我是jQuery和javascript的新手。任何帮助或建议将不胜感激。谢谢。