javascript - vue-slick-carousel touch move not working

Question

I have a laravel vue.js project, in my project I use vue slick carousl

this is my component code

<categories-slider></categories-slider>

@push('scripts')
    <script type="text/x-template" id="categories-slider">
        <div class="categories-slider-container">
            <v-slick v-bind="settings" v-if="categories.length !=0">
                <div v-for="(category, index) in categories" v-if="category.image_url" :key="index">
                    <figure @click="enterCategory(category.slug)">
                        <div class="category-img-container">
                            <img :src="category.image_url"/>
                        </div> 
                        <figcaption class="subtitle2">@{{category.name}}</figcaption>
                    </figure>
                </div>
            </v-slick>
        </div>
    </script>

    <script>
        Vue.component('categories-slider', {
            template: '#categories-slider',

            data: function() {
                return {
                    categories:[],
                    settings: {
                        "dots": false,
                        "arrows": false,
                        "edgeFriction": 0.35,
                        "infinite": true,
                        "swipeToSlide": true,
                        "autoplay": false,
                        "adaptiveHeight": true,
                        "autoplaySpeed": 500,
                        "variableWidth": true,
                        "centerMode": true,
                        /* "speed": 500, */
                        "slidesToShow": 6,
                        "slidesToScroll": 1,
                        @if (core()->getCurrentLocale() && core()->getCurrentLocale()->direction == 'rtl')
                        "rtl": true,
                        @endIf
                        "responsive": [
                            {
                                "breakpoint": 800,
                                "settings": {
                                    "slidesToShow": 5,
                                }
                            },
                            {
                                "breakpoint": 600,
                                "settings": {
                                    "slidesToShow": 3,
                                }
                            },
                            {
                                "breakpoint": 400,
                                "settings": {
                                    "slidesToShow": 2,
                                }
                            }
                        ]
                    }
                }
            },
            created: function() {
                this.getCategories();
            },
            methods: {
                enterCategory(slug){
                    window.location = "{{ config('app.url') }}" + "/" + slug;
                },
                getCategories(){
                    var this_this = this;

                    this.$http.get("{{ config('app.url') }}api/categories")
                        .then(function(response) {
                            this_this.categories = response.data.data;
                        })
                        .catch(function (error) {})
                }
            }
        })
    </script>
@endpush

my problem is when touch my slider to move right or left it move to more than on slide and show me this error in the console

[Intervention] Ignored attempt to cancel a touchmove event with cancelable=false, for example because scrolling is in progress and cannot be interrupted.

please help, Thanks.

Answer 1

等待大神答复