Add additional “Next” button to a Slick Slider

does anyone know how to add an additional “Next slide” button to a Slick Slider? I am already using the dots, and the previous & next arrows, but on the first slide I need to add an additional “Next Slide Button” (for design purposes). Suggestions…help…

Basically a button that advances to the next slide (so on tab-slick-index=”0″ go to tab-slick-index=”1″). This button would only show on the first slide.

Answer

Check out the https://kenwheeler.github.io/slick/ Methods section.

Possible Solution

Add your button <button id="nextSlideBtn">Next Slide Button</button> inside the first slide.

ES6

const button = document.getElementById('nextSlideBtn');
const nextSlide = (slider) => {
  $(slider).slick('slickNext');
};
button.addEventListener('click', () => {
  nextSlide(<YOUR SLIDER>);
});

ES5

var button = document.getElementById('nextSlideBtn');
var nextSlide = function nextSlide(slider) {
  $(slider).slick('slickNext');
};
button.addEventListener('click', function () {
  return nextSlide(<YOUR SLIDER>);
});