Javascript 更改具有不同宽度的目标项目

我有一个带物品清单的转盘（Sorgalla's carrousel）。例如，我想知道，如果窗口的宽度小于1024px，那么它的目标是滚动上的3个项目，如果宽度小于640px，那么它的目标是2个项目，如果宽度小于320px，那么它的目标是1个项目

我尝试使用这段代码，但没有成功（每次调整大小都需要一个重载功能，carrrousel才能使用新的滚动选项进行重载）：

HTML代码是：

<div class="box1"><a href="#addimg" class="plus2"></a><div id="addimg" style="width: 17.4%;height: 25px;"  class="white-popup mfp-hide">
       <input type="button" id="baddimg" style="float: left;" value="Añadir imágenes" onClick="addInput('dynamicInput');" />
       <div id="loading"></div>
</div><a href="#" class="jcarouselimgs-control-next arrowimg-next"></a><a href="#" class="jcarouselimgs-control-prev arrowimg-prev"></a><h2 class="infotitle">OUR PORTFOLIO</h2>
 <div class="jcarouselimgs"  data-jcarousel="true">
                    <ul  class="popupimg">
                        <li><a href="Imagenes/img1.png" class="image-link"><img src="Imagenes/img1.png" alt="Img1" title="Img1"></a></li>
                        <li><a href="Imagenes/img2.png" class="image-link"><img src="Imagenes/img2.png" alt="Img2" title="Img2"></a></li>
                        <li><a href="Imagenes/img3.png" class="image-link"><img src="Imagenes/img3.png" alt="Img3" title="Img3"></a></li>
                        <li><a href="Imagenes/img4.jpg" class="image-link"><img src="Imagenes/img4.jpg" alt="Img4" title="Img4"></a></li>
                        <li><a href="Imagenes/img5.jpg" class="image-link"><img src="Imagenes/img5.jpg" alt="Img5" title="Img5"></a></li>
                        <li><a href="Imagenes/img6.jpg" class="image-link"><img src="Imagenes/img6.jpg" alt="Img6" title="Img6"></a></li>

                    </ul>
              </div>
        </div>

管理示例CSS类以设置宽度：

.sampleClass {float:left;}
@media only screen and (max-width: 350px){
    .sampleClass {float:none;}

}
.sampleClass2 {float:left;}
@media only screen and (max-width: 1024px){
    .sampleClass2 {float:none;}

我也尝试过这种方法，但都没有结果：

(function () {
    if ($(window).width() < 300) {
         $('.jcarouselimgs').jcarousel('reload', {
           animation: 'fast'
        });
        $('.jcarouselimgs').jcarousel({
            // Core configuration goes here
        });

        $('.arrowimg-prev').jcarouselControl({
            target: '-=1'
        });

        $('.arrowimg-next').jcarouselControl({
            target: '+=1'
        });
         $('h1').addClass('blue'); 

    }

     if ($(window).width() < 640) {
         $('.jcarouselimgs').jcarousel('reload', {
           animation: 'slow'
        });
        $('.jcarouselimgs').jcarousel({
            // Core configuration goes here
        });

        $('.arrowimg-prev').jcarouselControl({
            target: '-=2'
        });

        $('.arrowimg-next').jcarouselControl({
            target: '+=2'
        });


    }
         if ($(window).width() > 1024) {
              $('.jcarouselimgs').jcarousel('reload', {
           animation: 'fast'
        });

        $('.jcarouselimgs').jcarousel({
            // Core configuration goes here
        });

        $('.arrowimg-prev').jcarouselControl({
            target: '-=3'
        });

        $('.arrowimg-next').jcarouselControl({
            target: '+=3'
        });


    }

});

（函数（）{
如果（$（窗口）.width（）<300）{
$（'.jcarouselimgs'）.jcarousel（'reload'{
动画：“快”
});
$（'.jcarouselimgs'）.jcarousel({
//核心配置在这里
});
$（'.arrowimgprev'）.jcarouselControl({
目标：'-=1'
});
$（'.arrowimgnext'）.jcarouselControl({
目标：'+=1'
});
$（'h1'）.addClass（'blue'）；
}
如果（$（窗口）.width（）<640）{
$（'.jcarouselimgs'）.jcarousel（'reload'{
动画：“慢”
});
$（'.jcarouselimgs'）.jcarousel({
//核心配置在这里
});
$（'.arrowimgprev'）.jcarouselControl({
目标：'-=2'
});
$（'.arrowimgnext'）.jcarouselControl({
目标：'+=2'
});
}
如果（$（窗口）.width（）>1024）{
$（'.jcarouselimgs'）.jcarousel（'reload'{
动画：“快”
});
$（'.jcarouselimgs'）.jcarousel({
//核心配置在这里
});
$（'.arrowimgprev'）.jcarouselControl({
目标：'-=3'
});
$（'.arrowimgnext'）.jcarouselControl({
目标：'+=3'
});
}
});

使用这个转盘，它更好：

(function () {
    if ($(window).width() < 300) {
         $('.jcarouselimgs').jcarousel('reload', {
           animation: 'fast'
        });
        $('.jcarouselimgs').jcarousel({
            // Core configuration goes here
        });

        $('.arrowimg-prev').jcarouselControl({
            target: '-=1'
        });

        $('.arrowimg-next').jcarouselControl({
            target: '+=1'
        });
         $('h1').addClass('blue'); 

    }

     if ($(window).width() < 640) {
         $('.jcarouselimgs').jcarousel('reload', {
           animation: 'slow'
        });
        $('.jcarouselimgs').jcarousel({
            // Core configuration goes here
        });

        $('.arrowimg-prev').jcarouselControl({
            target: '-=2'
        });

        $('.arrowimg-next').jcarouselControl({
            target: '+=2'
        });


    }
         if ($(window).width() > 1024) {
              $('.jcarouselimgs').jcarousel('reload', {
           animation: 'fast'
        });

        $('.jcarouselimgs').jcarousel({
            // Core configuration goes here
        });

        $('.arrowimg-prev').jcarouselControl({
            target: '-=3'
        });

        $('.arrowimg-next').jcarouselControl({
            target: '+=3'
        });


    }

});