Add Next and Prev buttons on Custom Paging on Slick

Question

How can I add the Next/Prev buttons on the pagination of Slick? On my first try, I tried to load the slick table and append the next and prev buttons on the pagination div. It successfully appended the button, but the buttons were static. They function when I click on them. My next attempt was to append the next and prev buttons using jQuery, then initialize the slick slider. The problem with this is the buttons were not appended.

-This is my loadSlider function:

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
        }
      }]
    });
  });
}

-My First Attempt

_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>');

And this is my second attempt:

$(_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);

Thanks for all your replies.

Image of what I am trying to accomplish:

I think you can find your answer here: http://stackoverflow.com/questions/29043562/add-custom-buttons-on-slick-carousel?rq=1 — Dupuis David, Apr 18 '16 at 06:27
Thanks for your response. but I've already seen that forum and It is not what I've been trying to do. I've already Successfully customized the buttons to numbers and now I am trying to append and prepend the next/prev button in the pagination I've customized. — banri16, Apr 18 '16 at 07:46
@DupuisDavid I've attached a photo of what it looks. I have already done that but the function of the buttons are not working. I believe that the prev button became the toggle for the first carousel while the "3" button won't work anymore and the prev button. I am not sure if what I am doing right or if there is any other way I could accomplish that. — banri16, Apr 18 '16 at 07:52
I think that you must add your next and prev buttons out of the dots ul. If it does not work, you can do it manually with the slick functions — Dupuis David, Apr 18 '16 at 07:53

Add Next and Prev buttons on Custom Paging on Slick

0 Answers0