javascript - 初始化时光滑的 slider 宽度错误

Question

我正在尝试实现 Slick slider ，但每张幻灯片的计算宽度是错误的(图像右侧的填充)。

<div class="responsive-slick">
    <img src="Gallery/large/01.jpeg">
    <img src="Gallery/large/02.jpeg">
    <img src="Gallery/large/03.jpeg">
    <img src="Gallery/large/04.jpeg">
    <img src="Gallery/large/05.jpeg">
    <img src="Gallery/large/06.jpeg">
</div>

$(document).ready(function(){
   $('.responsive-slick').slick({
       dots: true,
       mobileFirst:true,
       prevArrow: '<a class="slick-prev">Previous</button>',
       nextArrow: '<a class="slick-prev">Previous</button>',
       slidesToShow: 3,
       slidesToScroll: 8
   });

});

输出:

我做错了什么？

Answer 1

您当前的代码有问题

$('.responsive-slick').slick({
   dots: true,
   mobileFirst:true,
   **prevArrow: '<a class="slick-prev">Previous</button>',
   nextArrow: '<a class="slick-prev">Previous</button>',**
   slidesToShow: 3,
   slidesToScroll: 8
});

您正在打开一个 anchor 标记并关闭一个按钮。那是错误的。