gs-shop / vue-slick-carousel

🚥Vue Slick Carousel with True SSR Written for ⚡Faster Luxstay
https://gs-shop.github.io/vue-slick-carousel/
Other
803 stars 186 forks source link

binding settings does not work #138

Closed DumpName closed 3 years ago

DumpName commented 3 years ago

Hi, I am trying to setup a configuration which should behave responsive. However I am not able to inject my settings into the module. As I am unexperianced with node I used the prebuild .js provided at https://unpkg.com/vue-slick-carousel I registered the component in my main Component and ( after no success ) in a submodule. I have tried multiple options: Inserting a json into the module: (the Json is generated in by my webserver) <vueSlickCarousel v-bind='{...}'> Inserting the individual settings to the module: <vueSlickCarousel :autoplay="true" ...> Binding a settings object (which is stored in the parent module):

module.exports = {
    data: function ( ) {
        return {
            settings: {...}
        };
    },
...
<vueSlickCarousel v-bind="settings">

And also binding the individual settings objects.

I am experiancing the issue that in all cases my responsive settings are not showing any effects. Also when binding the settings via v-bind= none of my settings are used.

The settings that I am trying to implement:

<script>
        data: function ( ) {
            return {
                settings: {
                    autoplay      : true,
                    arrows        : true,
                    dots          : true,
                    slidesToShow  : 3,
                    slidesToScroll: 1,
                    infinite      : true,
                    appendDots    : '.product-slick-dots-',
                    responsive    : [{
                        breakpoint: 991,
                        settings  : {
                            slidesToShow  : 3,
                            slidesToScroll: 1
                        }
                    }, {
                        breakpoint: 480,
                        settings  : {
                            dots          : false,
                            arrows        : true,
                            slidesToShow  : 3,
                            slidesToScroll: 1
                        }
                    }]
                }
            };
        },