Currently, I have a functional product slider that I am attempting to adjust the width for smaller viewports, but it is proving to be a challenge.
Upon loading the document, the code tallies the width of each product item and initiates slides when buttons are clicked.
My issue arises when the viewport shrinks, causing each product item to narrow (managed with CSS media queries), and now the script must recalculate the new width defined in the media query when the browser window is resized.
I attempted to restructure it into a function or a variable and pass it into resize(), but I have not been successful in updating the calculated total with the resize event. I have considered separating the event and the function, but then I encountered some variable scope problems.
For reference, please visit My JSFiddle Demo
I realize that this may not be relevant to the average user, but I am determined to make it work.