How can I append the slick-arrow inside the slick-dots ul list? I would like to have a result like this:

My jQuery Code

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

My HTML Result

<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>

The Result I want

<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>

How can I append the slick-arrow inside the slick-dots ul list? I would like to have a result like this:

My jQuery Code

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

My HTML Result

<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>

The Result I want

<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>

• javascript
• jquery
• html
• css
• slick.js

• You're posting the result you would like to get, but not your starting point or what you fail to achieve – Will Commented Feb 25, 2019 at 20:59
• @will I added the starting point – Neri Esparza Commented Feb 25, 2019 at 22:00

2 Answers 2

I find out that with slick you can create your own divs with your own class names.

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>

Then you can call those classes within slick function.

JS

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

Looks like you're using a Jquery-based library and I'm not sure when you want this HTML to be added, but assuming that you do this on page load (if you need to do this after the user calls the function slick(), append/prepend in the callback function), you were almost there. Instead of adding <li class='next'></li>, add the entire thing as follows:

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

or different syntax, same result:

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

But why not modify the HTML at its source instead of using a script?