Reactive Carousel navigation

I doubt this is possible, but just wanted to reach out here to double check.   

We are working on a new reactive web application and one of the requirements is to have a carousel with a handful of elements.   (easy enough)   The trouble comes when we get into the specifics, let's say we have 5 items that should be rotating.   The UX specifies that we should show 3 of the 5 on the web screen with the current item being slightly larger than the cards on the left and right.  

It also specifies that that dots below the 3 items match the total number of rotating items.   So for this example I set the carousel up to display 3 items and OS creates 2 dots below because there are two partial sets of 3.   Any ideas how to update that portion of the navigation to show 5 vs 2 dots?

Note:  The example screenshot is actually a list of 12 items so we get 4 dots.  In that instance I would want 12 dots.  (we would never actually use a list that large with this use case)


If the question is whether you can achieve the result you want with the built-in Carousel widget, I think the answer is no, at least not without significant customization.

If the question is whether you can achieve the result creating your own custom widget, you can definitely do that.

It sounds like your use case and requirements don't match the features of the built-in Carousel, in that you want multiple items per "page" (which is supported, but not precisely the way you're looking for) alongside navigation dots that represent all available items (which is supported, but not with multiple items per page). 

You're probably going to need to look for an alternate Carousel implementation, or roll your own, to get exactly the result you're looking for.

You might be able to adapt something like this:

Thanks for the response.   I did spend some time trying to import custom react.js to create a widget but frankly I failed.   I was trying to create this as a widget:

I looked around for tutorials on creating widgets in OS reactive web but found nothing.   Then I got pulled off to work on something else and never circled back.   I think a tutorial would be great because I've had our business areas ask for all kinds of things that aren't available out of the box.  (like material design elements or this carousel)

Can't promise how quickly I can get to it, but I will see if I can get the react component working, and put that on my list of How-Tos to work on for our Advocacy team YouTube playlist.

I didn't realize there was a YouTube playlist.   I'll have to look for that.

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.