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. The carousel plug-ins that I've looked at do not work the way that this one needs to 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.