Carousel slider

I’m trying to build a website and the carousel slider is killing me. Basically each div position needs to have an id associated with it (i.e. position0, position1, etc) and position 0 is hidden, then based on width I can use media queries to determine what other numbers are hidden.

Content needs to slide smoothly from div 3 to div 2 and then to div 1 and then out of div 1 and to hidden as it reaches div 0. In this scenario, if only 3 are showing then position 4 (and higher) would be invisible, but they would become visible as it slid to position 3.

The content within the position-div is a div filled with content, a combination of images and text and a single link at the bottom.

The carousel should auto-play and it should stop if any of the elements in the carousel are clicked. There are also manual navigation buttons (previous and next)

I have no idea how to properly accomplish this. Everything I’ve been trying has not been working. [B]The carousel plug-ins that I’ve looked at do not work the way that this one needs to[/B] and responsiveness is key, which is why the number of visible position-divs needs to be able to change.

Any help would be greatly appreciated. If you could point me to some tutorials or code-snippets that might be helpful to me that’d be great, or if you want to contribute your own ideas for snippets and functions, that would be greatly appreciated too.

Also in #JavaScript _↴