Добавьте дополнительную кнопку "Далее" к Slick Slider

#javascript #slick.js

Вопрос:

кто-нибудь знает, как добавить дополнительную кнопку «Следующий слайд» к гладкому слайдеру? Я уже использую точки и стрелки «Предыдущий» и «следующий», но на первом слайде мне нужно добавить дополнительную кнопку «Следующий слайд» (для целей дизайна). Предложения … помощь…

В основном кнопка, которая переходит к следующему слайду (поэтому на tab-slick-index =»0″ перейдите к tab-slick-index =»1″). Эта кнопка будет отображаться только на первом слайде.

Ответ №1:

Проверьте https://kenwheeler.github.io/slick / Раздел методов.

Возможное решение

Добавьте свою кнопку <button id="nextSlideBtn">Next Slide Button</button> внутри первого слайда.

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

1. Спасибо за это, не слишком разбираюсь в Javascript, но что бы я поставил в качестве <ВАШЕГО СЛАЙДЕРА>? Это просто класс моего слайдера? т. Е. У меня есть: $(‘.current-slider-1’).slick({ {); — могу ли я просто добавить класс slider в эту область?

2. Да, это сработало … мило, большое спасибо, Луис! var button = document.getElementById('nextSlideBtn'); var nextSlide = function nextSlide(slider) { $(slider).slick('slickNext'); }; button.addEventListener('click', function () { return nextSlide('.current-slider-1'); });