Magento 2: Page Builder Product Carousel slick slide custom options

Question

Can someone please help me to add custom options to the slick slider init for page builder product carousels?

I don't know exactly where it's being initialized and I have very little experience in creating mixins.

I was easily able to do this by copying over

vendor/magento/module-page-builder/view/base/web/js/resource/slick/slick.js 

to my theme directory and replacing the response: null with the below but I know it's not the correct way to overwrite an entire library for a small change like this.

responsive: [
    {
        breakpoint: 9999,
        settings: {
            slidesToShow: 6,
            slidesToScroll: 6
        }
    },
    {
        breakpoint: 1024,
        settings: {
            slidesToShow: 4,
            slidesToScroll: 4
        }
    },
    {
        breakpoint: 768,
        settings: {
            slidesToShow: 3,
            slidesToScroll: 3
        }
    },
    {
        breakpoint: 480,
        settings: {
            slidesToShow: 1,
            slidesToScroll: 1
        }
    }
],

What would be the correct way to add my custom options to the slick init for page builder product carousels?

Answer 1

The breakpoints options for page builder product carousels are configured in vendor/magento/module-page-builder/etc/view.xml.
If you want to override the options, you can add your options in the view.xml in your theme: app/design/frontend/{Vendor}/{theme}/etc/view.xml. e.g. set slidesToShow to 4 for breakpoint 1024, you can add:

<vars module="Magento_PageBuilder">
    <var name="breakpoints">
        <var name="desktop">
            <var name="conditions">
                <var name="min-width">1024px</var>
            </var>
            <var name="options">
                <var name="products">
                    <var name="default">
                        <var name="slidesToShow">4</var>
                    </var>
                </var>
            </var>
        </var>           
    </var>
</vars>

Answer 2

I had the same situation and i made an extension to add custom options to the slider element in the page builder

https://github.com/svalveson/SliderOptions