为什么两个或多个平滑滑块不能在同一页面上使用？

Question

我想使用两个相同的光滑滑条，第一个滑条起作用，但另一个滑条不起作用。有人可以帮我纠正无效代码吗？

<section class="center slider">
  <div><a href="#"><img src="Desert.jpg"></a></div>
  <div><a href="#"><img src="Desert.jpg"></a></div>
  <div><a href="#"><img src="Desert.jpg"></a></div>
  <div><a href="#"><img src="Desert.jpg"></a></div>
</section>
<section class="center1 slider">
  <div><a href="#"><img src="Desert.jpg"></a></div>
  <div><a href="#"><img src="Desert.jpg"></a></div>
  <div><a href="#"><img src="Desert.jpg"></a></div>
  <div><a href="#"><img src="Desert.jpg"></a></div>
</section>

$(document).on('ready', function() {
  $(".center").slick({
    dots: false,
    infinite: true,
    centerMode: true,
    slidesToShow: 4,
    slidesToScroll: 2
  });
  $(".center1").slick({
    dots: false,
    infinite: true,
    centerMode: true,
    slidesToShow: 4,
    slidesToScroll: 2
  });
});