Responsive Carousel jQuery & CSS

Responsive Carousel jQuery & CSS

I've been working on this carousel for a few weeks now and about to quit. I've played with flex and css without any luck. I am hoping someone can tell me how to get this to reduce as the display reduces.

I found I can reduce the number of slides displayed, e.g. start at 7 then to 5, then to 3 and then 1 is how I think it will go.

However, I haven't created a site for a few years and I thought I could call these variants based on the display size. I was trying to call the different sizes for the js too.

I'm also confused on how to call one css for all the pages and just load css for medium and small sizes which would call essential differences for each size.

Any help would be appreciated, or I would like to find someone to hire. I am a newbie with jQuery.

Here is what I have so far: http://web-mtg.com/test/carousel.html