我在页面上有几个滑块，但是我无法分别计算每个滑块的幻灯片

Question

如果其中有四个以上的幻灯片，我会初始化它的滑块。我在该站点中使用flexslider，因为我需要IE9支持，但这不是重点。使用JS，我检查轮播中是否有足够的产品，以及滑块是否已插入。现在，我需要在同一页面上放置另一个具有相同类名的滑块，但是我在初始化时遇到了麻烦，因为我在滑块中计算了li元素，如果在页面上有2个滑块，则它将计算li为两个滑块，因此，如果我有2个滑块，一个带有3个滑块，第二个带有6个滑块，由于“ mySliderClassName.length> 4”，它们都会被初始化。希望您能理解我的意思。我需要相同的类名，因为客户端可以在不同页面上多次使用此滑块。我认为我应该使用for或forEach之类的东西，我尝试了一下，但是没有用。我以前从没做过，我认为我在代码中犯了一些错误。这就是我初始化滑块的方式（如果页面中只有1个滑块，则可以正常工作）：

    initSlider: function () {
        var self = this;
        self.productSlider = jQuery('.j-product-carousel');

        if (self.productSlider.find('li').length > 4) {
            self.productSlider.flexslider({
                animation: "slide",
                itemWidth: 257,
                move: 1,
                controlNav: false,
                minItems: getGridSize(),
                maxItems: getGridSize(),
            });

            jQuery(window).on('resize', function() {
                var gridSize = getGridSize();

                self.productSlider.data('flexslider').vars.minItems = gridSize;
                self.productSlider.data('flexslider').vars.maxItems = gridSize;
            });

            setTimeout(function(){
                jQuery(window).resize();
            }, 100);
        }

    function getGridSize() {
        return (window.innerWidth < 767) ? 2 : 4;
    }
    }