在Slick上的自定义分页上添加下一个和上一个按钮

Question

如何在Slick的分页上添加Next / Prev按钮？在我第一次尝试时，我尝试加载光滑的表格并在分页div上附加下一个和上一个按钮。它成功地附加了按钮，但按钮是静态的。当我点击它们时它们起作用。我的下一次尝试是使用jQuery追加next和prev按钮，然后初始化光滑的滑块。这个问题是没有附加按钮。

- 这是我的loadSlider功能：

loadSlider: function(_this) {
  $(document).ready(function() {
    $(_this.widgetClass + '.custom-slick').slick({
      dots: true,
      infinite: false,
      speed: 300,
      slidesToShow: 4,
      slidesToScroll: 4,
      customPaging: function(slider, i) {
        var thumb = $(slider.$slides[i]).data();
        return '<a>' + (i + 1) + '</a>';
      },
      nextArrow: $('.nextPage'),
      prevArrow: $('.previousPage'),
      responsive: [{
        breakpoint: 1024,
        settings: {
          slidesToShow: 3,
          slidesToScroll: 3,
          infinite: false,
          dots: true
        }
      }, {
        breakpoint: 600,
        settings: {
          slidesToShow: 2,
          slidesToScroll: 2
        }
      }, {
        breakpoint: 480,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1
        }
      }]
    });
  });
}      

- 我的第一次尝试

_this.loadSlider(_this);

$(_this.widgetClass + '.custom-slick .slick-dots').prepend('<li><a href="#" aria-label="Previous" class="prevPage"><span aria-hidden="true">&laquo;</span></a></li>');
$(_this.widgetClass + '.custom-slick .slick-dots').append('<li><a href="#" aria-label="Next" class="nextPage"><span aria-hidden="true">&raquo;</span></a></li>');    

这是我的第二次尝试：

$(_this.widgetClass + '.custom-slick .slick-dots').prepend('<li><a href="#" aria-label="Previous" class="prevPage"><span aria-hidden="true">&laquo;</span></a></li>');
$(_this.widgetClass + '.custom-slick .slick-dots').append('<li><a href="#" aria-label="Next" class="nextPage"><span aria-hidden="true">&raquo;</span></a></li>');

_this.loadSlider(_this);

感谢您的所有回复。

我想要完成的事情的图像：