问题描述
我正在使用 slick 来获取图像的水平滑块。我希望获得的是单击右箭头以查看更多图像,但该按钮不起作用,而是左键单击并显示黑屏,这不应该发生我应该如何实现这? 下面是我的代码:
<template>
<div>
<slick
ref="slick"
:options="slickOptions"
>
<img
:data-lazy="
'https://mdbootstrap.com/img/Photos/Slides/img%20(35).jpg&width=150&enforceAspectRatio=true'
" style="width:200px; height:200px "
/>
.
.
.same image tag 10 times
.
.
.
.
<img
:data-lazy="
'https://mdbootstrap.com/img/Photos/Slides/img%20(35).jpg&width=150&enforceAspectRatio=true'
" style="width:200px; height:200px "
/>
</slick>
</div>
</template>
我希望得到的是单击右箭头以查看更多图像,但该按钮不起作用,而是单击左键并显示黑屏,这不应该发生,我应该如何实现? 下面的图片显示了我的意思。
slickOptions: {
infinite: false,adaptiveHeight: false,//variableWidth: true,draggable: true,edgeFriction: 0.3,slidesToShow: 6,slidesToScroll: 3,responsive: [
{
breakpoint: 1024,settings: {
slidesToShow: 6,infinite: true
}
},{
breakpoint: 641,settings: {
slidesToShow: 3,slidesToScroll: 2,initialSlide: 2
}
}
}
],swipe: true,rows: 0,prevArrow:
'<div class="back-arrow"><i class="icons" aria-hidden="true"></i></div>',nextArrow:
'<div class="forward-arrow"><i class="icons" aria-hidden="true"></i></div>',},currentLocale: "",showList: true,};
created() {
this.slickOptions.prevArrow =
'<div class="forward-arrow"><i class="icons" aria-hidden="true"></i></div>';
this.slickOptions.nextArrow =
'<div class="back-arrow"><i class="icons" aria-hidden="true"></i></div>';
this.slickOptions.rtl = true;
}
我希望得到的是单击右箭头以查看更多图像,但该按钮不起作用,而是单击左键并显示黑屏,这不应该发生,我应该如何实现? 下面的图片显示了我的意思。
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)