Как добавить гладкие стрелки внутри списка точек?

Question

Как я могу добавить slick-arrow внутри списка slick-dots ul? Я хотел бы получить такой результат:

Мой код jQuery

$(".my-slider").slick({
  arrows: true,
  pauseOnDotsHover: true,
  accessibility: true,
  responsive: [{
    arrows: false,
    breakpoint: 1024,
    nextArrow: $('.slick-dots .next'),
    prevArrow: $('.slick-dots .previous')
  }]
});
$("<li class='next'></li>").prependTo(".slick-dots");
$("<li class='previous'></li>").appendTo(".slick-dots");

Мой HTML результат

<ul class="slick-dots" role="tablist" style="display: block;">
  <li class='next'></li>
  <li class="slick-active"><button type="button" role="tab" id="slick-slide-control00" aria-controls="slick-slide00" aria-label="1 of 5" tabindex="0" aria-selected="true">1</button></li>
  <li><button type="button" id="slick-slide-control01">2</button></li>
  <li><button type="button" id="slick-slide-control02">3</button></li>
  <li><button type="button" id="slick-slide-control03">4</button></li>
  <li><button type="button" id="slick-slide-control04">5</button></li>
  <li class='previous'></li>
</ul>

Результат, который я хочу

<ul class="slick-dots" role="tablist" style="display: block;">
  <li><button class="slick-prev slick-arrow" aria-label="Previous" type="button" style="display: block;">Previous</button></li>
  <li class="slick-active"><button type="button" role="tab" id="slick-slide-control00" aria-controls="slick-slide00" aria-label="1 of 5" tabindex="0" aria-selected="true">1</button></li>
  <li><button type="button" id="slick-slide-control01">2</button></li>
  <li><button type="button" id="slick-slide-control02">3</button></li>
  <li><button type="button" id="slick-slide-control03">4</button></li>
  <li><button type="button" id="slick-slide-control04">5</button></li>
  <li><button class="slick-next slick-arrow" aria-label="Next" type="button" style="display: block;">Next</button></li>
</ul>

Answer 1

Я обнаружил, что с помощью Slick вы можете создавать свои собственные div с вашими именами классов.

HTML

<div class="slider-controls">
 <button type="button" class="slide-m-prev">prev</button>
 <div class="slide-m-dots"></div>
 <button type="button" class="slide-m-next">next</button>
</div>

Затем вы можете вызывать эти классы внутри гладкой функции.

JS

$(".slides").slick({
      dots: true,
      arrows: true,
      appendDots: $(".slide-m-dots"),
      prevArrow: $(".slide-m-prev"),
      nextArrow: $(".slide-m-next")
    });

Answer 2

Похоже, вы используете библиотеку на основе Jquery, и я не уверен, когда вы хотите, чтобы этот HTML был добавлен, но при условии, что вы делаете это при загрузке страницы (если вам нужно сделать это после того, как пользователь вызовет функцию slick(), добавить / добавить в функцию обратного вызова), вы были почти там. Вместо добавления <li class='next'></li>добавьте всю вещь следующим образом:

$('<li><button class="slick-prev slick-arrow" aria-label="Previous" type="button" style="display: block;">Previous</button></li>').prependTo('.slick-dots');

или другой синтаксис, тот же результат:

$('.slick-dots').prepend('<li><button class="slick-prev slick-arrow" aria-label="Previous" type="button" style="display: block;">Previous</button></li>');

Но почему бы не изменить HTML в его источнике вместо использования скрипта?