What would be the best way to get a carousel component onto a SKUID page? Should we build one w/ SK

Questions
,
1

What would be the best way to get a carousel component onto a SKUID page? Should we build a custom-component using SKLUID options? Or, should we plug-in an existing Carousel component?

2

Hey Leslie!

I’ve been able to create a carousel with Flickity and a tabset.  You can take the CSS directly from Flickity, and then add an external reference to their JS file.  Afterwards, create a tabset with each one of your tabs being one of your carousel panels and use javascript to initialize the carousel and copy the row HTML into an empty wrapper that would hold the carousel.

I’m currently working with one of your team members on a carousel, and this is the method that I’ve discussed with him as well!  There are definitely other options available online, but this solution was fairly simple to implement

Thanks!
Christine

3

hi Christine, do happen to have any sample of how you used tabset? Thanks!

4

Unfortunately I don’t have it anymore, sorry!  I essentially looked at the documentation for Flickity and implemented the carousel through JS from the documentation.  Good luck!

5

seems straightforward but I don’t quite understand what you mean by copy row HTML into wrapper. sorry if I am missing something. 

6

Hey has anyone done this recently?
We tried doing it with flickity but was not successful

9

I have built a carousel recently using Skuid. I used a responsive grid with 3 columns. In the middle column I used a Deck, set to the model where the content on the carousel is located. On the left and right grid divisions I have button sets with left and right arrows. Those button actions are set to Run component action, the deck is the component, action to run is “go to page”, target page is next or previous depending on which button you’re configuring.

To make it automatically click through the carousel and restart I used a Generic JS resource type with the below code. Make sure to replace the 2 areas noted in the code, one with the name of your model and one with the button ID of your “next” button. Make sure it’s the button and not the button set, they have different unique ID’s.

((skuid) => {
    skuid.events.subscribeOnce("pageload", () => {
        // Set a timeout because we need extra time for the components to load.
        // If you are seeing errors, increase this timeout (or find a better event to listen for)
        setTimeout(() => {
            var i = 1;
            var sourceModel = skuid.model.getModel('REPLACE-THIS-WITH-NAME-OF-MODEL-ON-DECK');
            var lastItem = sourceModel.data.length;
            var intervalId = setInterval(function () {
                if (i === lastItem) {
                    setTimeout(function () {
                    // clearInterval(intervalId);
                    i = 1;
                    sourceModel.load();
                    }, 2500);
                }
                    console.log(i,lastItem);
                    let nextButton = document.getElementById('REPLACE-THIS-WITH-ID-OF-NEXT-BUTTON-SET').querySelector('button');
                    console.log("click", nextButton);
                    nextButton.click();
                    i++;
            }, 5000);
        }, 500);
    });
})(skuid)
2 Likes
11

Thanks, @david.burns!

@Dave Using the solution David shared with the deck is the best option if your carousel images are linked to data.

If the pictures aren’t necessarily data driven, you can use wrappers and a responsive grid as described here: Design Patterns: Carousel.

Happy building!

1 Like