Swatches options with carousel slider on hover on PLP

[rutulritz]

Hi,

I want to implement slider on the swatches options which are rendering using breeze swatches on the Product image hover on PLP.

I already tried to do by using the beeze carousel but the swatches are rendering from JS so I am not able to implement this.

Can you please guide me to do the same. Below is the mock-up for the swatch option slider with dots.

Thanks

[vovayatsyuk]

You can try to use the built-in slider:

$('.swatch-attribute-options').pagebuilderSlider()

But I'm not sure if it will work fine because it will change the markup. And, of course, you will need to add some styling.

It's up to you to decide how to do this. How would you do that in the Luma theme?

[rutulritz]

Where can I put this code? because I put it on page load as below but not working.

$(document).on('breeze:load', function () {
        $('.swatch-attribute-options').pagebuilderSlider();
});

[vovayatsyuk]

Since swatches are js driven you should wait until magento will render them. Use $.async for that.

[rutulritz]

OK. Its working now.
How I add options like item limit and arrows/dots show hide o carousel?

[vovayatsyuk]

$(el).pagebuilderSlider({
  dots: true,
  arrows: true
});

Use CSS styles to setup how many swatches are visible at once.