How to get web component carousel callback functions and configured options

[Narayana]

We created a page with multiple carousel components. We want to achieve slides to scroll through programmatically(Same as Next/Previous arrows event) based on the list item currently focused on. I need few clarifications on the carousel component as mentioned below.

1. How to get the configured options(like responsive → Slides to show/Slides to scroll…etc) of the carousel component once it’s loaded.
2. List of callback functions is available in the carousel component. Is there any reference on how to integrate those functions.
3. How to get the instance of the carousel once the web component is loaded.

[maddy]

Hi @Narayana

To clarify, are you using the built in Builder carousel?

[Narayana]

Yes. I am using the built in Builder carousel component.

[maddy]

Thanks for clarifying!

You can adjust responsive settings like slides to show and slides to scroll by selecting the carousel block, navigating to the options tab, and selecting “show advanced”.

The Builder carousel uses Slick, so you can navigate here to learn more about responsive settings and functions available to the carousel component.

[Narayana]

Sorry maddy, We already made this responsive options configuration in our site/page. We want to know is there a way to get these configured options data once the carousel component is loaded?

slick - the last carousel you'll ever need - We already gone through this, the same way if we try to listen the callback/events as below, none of the events are fired.

$(’.builder-carousel’, ‘.videos-box’).on(‘swipe’, function(event, slick, direction) {
console.log(‘direction’, direction);
// left
});

// On edge hit
$(’.builder-carousel’, ‘.videos-box’).on(‘edge’, function(event, slick, direction) {
console.log(‘edge was hit’)
});

// On before slide change
$(’.builder-carousel’, ‘.videos-box’).on(‘beforeChange’, function(event, slick, currentSlide, nextSlide) {
console.log(‘next slide’, nextSlide);
});

$(’.slick-slider’, ‘.videos-box .builder-carousel’).on(‘swipe’, function(event, slick, direction) {
console.log(‘direction’, direction);
// left
});

// On edge hit
$(’.slick-slider’, ‘.videos-box .builder-carousel’).on(‘edge’, function(event, slick, direction) {
console.log(‘edge was hit’)
});

// On before slide change
$(’.builder-carousel’, ‘.videos-box .builder-carousel’).on(‘beforeChange’, function(event, slick, currentSlide, nextSlide) {
console.log(‘next slide’, nextSlide);
});