如何以正确的顺序制作光滑的显示图像？

如何解决如何以正确的顺序制作光滑的显示图像？

我正在使用 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">&#xe830;</i></div>',nextArrow:
                    '<div class="forward-arrow"><i class="icons" aria-hidden="true">&#xe803;</i></div>',},currentLocale: "",showList: true,};

created() {
        
            this.slickOptions.prevArrow =
                '<div class="forward-arrow"><i class="icons" aria-hidden="true">&#xe803;</i></div>';
            this.slickOptions.nextArrow =
                '<div class="back-arrow"><i class="icons" aria-hidden="true">&#xe830;</i></div>';
            this.slickOptions.rtl = true;
            }