如何解决vue-slick-carousel 触摸移动不起作用
我有一个 laravel vue.js 项目,在我的项目中我使用了 vue slick carousl
这是我的组件代码
<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
我的问题是当触摸我的滑块向右或向左移动时,它会移动到比幻灯片更多的位置,并在控制台中向我显示此错误
[干预] 忽略尝试取消带有 cancelable=false 的 touchmove 事件,例如因为滚动正在进行且无法中断。
请帮忙,谢谢。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。