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.
