Standard Rotation

Single Item Rotation

The goal here was to change the way the carousel behaves without actually changing the way the markup is initially written.

In order to achieve this, I had to use JS to reconstruct the carousel markup into more slides. Then alter the styles to make it move only one item. This is all triggered on page load by a data attribute.

The modified styles are calculated and injected with JS as well. Each carousel is assigned a unique class in the JS so styles don't interfere with other carousels on the page. This allows each carousel to operate independently regardless of how many items it displays. So the styles making the 3-wide carousel work aren't going to affect the 4-wide carousel below.

DISCLAIMER: I don't know that I would recommend using this method for doing this on a regular basis. If you are maintaining your own HTML and you know what you are doing, it would probably be more beneficial to just initially code it to what the JS is changing it to. But I am typically making things that other people are going to be implementing. And the easier it is for them to build and understand, the easier it is for me troubleshoot when things don't work. Not that my things don't work or anything... =)