E-commerce product page

Developed using HTML, CSS & JS/jQuery. For the product slider, I used image counter with JS element.attr("src","/source/img1") with if selection. I wonder what the other possible and easiest methods to implement such a slider with arrow navigations are.

Also, I used some more CSS media queries rather than the main two options mentioned in the project files. The reason for that is, I noticed some visual element anomalies in different displays on different devices. For example, when I style CSS in min-width:1280px, those changes affect the other higher devices too. But some elements not all, struggled a bit when positioning. So I used min-width:1440px & min-width:1900px