title: Position dots between buttons in slick slider
body: <p>I want to position the dots of the slick slider between the prev and next button.
  Slick provides settings to let you position the dots/buttons. But they will show after each other.</p>
  
  <p>This is my code:</p>
  
  <pre><code>$('.slider').slick({
      arrows: true,
      prevArrow: '&lt;button type="button" class="slick-prev"&gt; &lt;- &lt;/button&gt;',
      nextArrow: '&lt;button type="button" class="slick-next"&gt; -&gt; &lt;/button&gt;',
      appendArrows:$('.slider-controls'),
      dots: true,
      appendDots:$('.slider-controls'),
  });
  </code></pre>
  
  <p>It generates the controls like this:</p>
  
  <pre><code>&lt;div class="slider-controls d-flex align-items-center justify-content-center"&gt;
      &lt;button type="button" class="slick-prev slick-arrow" style=""&gt; &amp;lt;- &lt;/button&gt;
      &lt;button type="button" class="slick-next slick-arrow" style=""&gt; -&amp;gt; &lt;/button&gt;
      &lt;ul class="slick-dots" style="" role="tablist"&gt;
          &lt;li class="slick-active" role="presentation"&gt;&lt;button type="button" role="tab" id="slick-slide-control00" aria-controls="slick-slide00" aria-label="1 of 3" tabindex="0" aria-selected="true"&gt;1&lt;/button&gt;&lt;/li&gt;
          &lt;li role="presentation" class=""&gt;&lt;button type="button" role="tab" id="slick-slide-control01" aria-controls="slick-slide01" aria-label="2 of 3" tabindex="-1"&gt;2&lt;/button&gt;&lt;/li&gt;
          &lt;li role="presentation" class=""&gt;&lt;button type="button" role="tab" id="slick-slide-control02" aria-controls="slick-slide02" aria-label="3 of 3" tabindex="-1"&gt;3&lt;/button&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But I want/need it like this:</p>
  
  <pre><code>&lt;div class="slider-controls d-flex align-items-center justify-content-center"&gt;
      &lt;button type="button" class="slick-prev slick-arrow" style=""&gt; &amp;lt;- &lt;/button&gt;
  
      &lt;ul class="slick-dots" style="" role="tablist"&gt;
          &lt;li class="slick-active" role="presentation"&gt;&lt;button type="button" role="tab" id="slick-slide-control00" aria-controls="slick-slide00" aria-label="1 of 3" tabindex="0" aria-selected="true"&gt;1&lt;/button&gt;&lt;/li&gt;
          &lt;li role="presentation" class=""&gt;&lt;button type="button" role="tab" id="slick-slide-control01" aria-controls="slick-slide01" aria-label="2 of 3" tabindex="-1"&gt;2&lt;/button&gt;&lt;/li&gt;
          &lt;li role="presentation" class=""&gt;&lt;button type="button" role="tab" id="slick-slide-control02" aria-controls="slick-slide02" aria-label="3 of 3" tabindex="-1"&gt;3&lt;/button&gt;&lt;/li&gt;
      &lt;/ul&gt;
  
      &lt;button type="button" class="slick-next slick-arrow" style=""&gt; -&amp;gt; &lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I know I could position the buttons with CSS but there are a few reasons, that I need the HTML like this.</p>
  
  <p>Is there any way?</p>