0

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?

2 Answers 2

10

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>
3
  • Thanks. This answer was useful. But, I hope it is okay to define it like this as per Magento Commerce standards. Jul 8, 2020 at 4:59
  • This was not useful for me ! Aug 14, 2020 at 12:47
  • what is the option to change the slides to scroll on various breakpoints? following is not working: <var name="slidesToScroll">4</var> Please help me as soon as possible. Jul 22, 2021 at 7:35
5

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

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.