在窗口上设置产品滑块宽度，同时调整CSS媒体查询的大小

我有一个正在工作的产品滑块，现在我正在尝试为较小的视口减小宽度进展不太顺利。

代码从加载文档时将每个产品项的宽度相加开始单击按钮时会发生滑动。

我的问题是，当视口变小时，每个产品项都会变窄（用CSS媒体查询处理），而现在使用脚本时，当浏览器窗口调整大小时，它需要重新计算媒体查询中指定的新宽度。

我试图重构为一个函数或变量，并将其传递给resize()但没有运气看到通过调整大小事件计算的总数。我应该将事件和函数分开，但随后我将面临一些可变范围的问题。

请参阅我的JSFiddle演示

我知道这对普通用户来说可能没有用，但我想试一试。