title: Slick Slider Custom HTML Paging
body: <p>Is it possible to create custom paging dots just using HTML for Slick Slider just like Bootstrap Carousel allows you to.</p>
  
  <p><strong>Bootstrap paging example</strong></p>
  
  <pre><code>&lt;ol class="carousel-indicators"&gt;
      &lt;li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"&gt;&lt;/li&gt;
      &lt;li data-target="#carouselExampleIndicators" data-slide-to="1"&gt;&lt;/li&gt;
      &lt;li data-target="#carouselExampleIndicators" data-slide-to="2"&gt;&lt;/li&gt;
  &lt;/ol&gt;
  </code></pre>
  
  <p>I know you can create custom dots like so;</p>
  
  <pre><code>customPaging : function(slider, i) {
      var thumb = $(slider.$slides[i]).data('thumb');
      return '&lt;a&gt;&lt;img src="'+thumb+'"&gt;&lt;/a&gt;';
  }
  </code></pre>
  
  <p>But this method doesn't work for what I'm trying to achieve. Here's what I want to be able to use as my paging nav.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>jQuery(document).ready(function($){
   $('.step').click(function(){
    var elem = $(this);
    var pointer = $('#pointer');
  
    if( elem.hasClass('one') ){
     pointer.css('left', '0');
    }else if( elem.hasClass('two') ){
     pointer.css('left', '20%');
    }else if( elem.hasClass('three') ){
     pointer.css('left', '40%');
    }else if( elem.hasClass('four') ){
     pointer.css('left', '60%');
    }else{
     pointer.css('left', '80%');
    }
  
    $('.step').removeClass('active');
    elem.addClass('active');
   });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.steps {
    position: relative;
    margin-top: 4rem;
    padding-top: 14rem;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
  }
   .steps #pointer {
    position: absolute;
    top: 0;
    left: 0;
    width: 20%;
    text-align: center;
    -webkit-transition: left 0.3s ease;
    -o-transition: left 0.3s ease;
    transition: left 0.3s ease;
  }
   .steps #pointer svg {
    width: 10rem;
    height: auto;
  }
   .steps .step {
    width: 20%;
    text-align: center;
  }
   .steps .step svg circle {
    fill: blue;
    -webkit-transition: fill 0.3s ease;
    -o-transition: fill 0.3s ease;
    transition: fill 0.3s ease;
  }
   .steps .step p {
    font-size: 1.8rem;
    font-weight: 600;
    color: blue;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    -webkit-transition: max-height 0s, opacity 0.3s ease;
    -o-transition: max-height 0s, opacity 0.3s ease;
    transition: max-height 0s, opacity 0.3s ease;
  }
   .steps .step.active svg circle {
    fill: lightblue;
  }
   .steps .step.active p {
    opacity: 1;
    max-height: unset;
  }
   </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div&gt;slider here&lt;/div&gt;
  &lt;div class="steps"&gt;
    &lt;div id="pointer"&gt;
      &lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68.01 81.14"&gt;&lt;g id="Layer_2" data-name="Layer 2"&gt;&lt;g id="Layer_1-2" data-name="Layer 1"&gt;&lt;path d="M56.73,56a33.13,33.13,0,0,1-2.33,2.41Z" style="fill: #2daae2;"/&gt;&lt;path d="M52.56,33.5c0,11.41-9,20.67-20,20.67s-20-9.26-20-20.67,9-20.68,20-20.68S52.56,22.08,52.56,33.5Z" style="fill: #2daae2;"/&gt;&lt;path d="M32.52,0C14.56,0,0,15,0,33.56A34.07,34.07,0,0,0,8.27,55.92l0,0,2.33,2.41,0,0L32.52,81.14,54.38,58.4l0,0L56.73,56l0,0A34.07,34.07,0,0,0,65,33.56C65,15,50.48,0,32.52,0Zm0,60.16C18.25,60.16,6.69,48.22,6.69,33.5S18.25,6.83,32.52,6.83,58.36,18.77,58.36,33.5,46.79,60.16,32.52,60.16Z" style="fill: #2daae2;"/&gt;&lt;path d="M57.71,55.92l-.05,0,.05,0Z" style="fill: #2daae2;"/&gt;&lt;path d="M52.56,33.5c0,11.41-9,20.67-20,20.67s-20-9.26-20-20.67,9-20.68,20-20.68S52.56,22.08,52.56,33.5Z" style="fill: #fff;"/&gt;&lt;path d="M52.56,33.5c0,11.41-9,20.67-20,20.67s-20-9.26-20-20.67,9-20.68,20-20.68S52.56,22.08,52.56,33.5Z" style="fill:#8dd2f3;"/&gt;&lt;path class="cls-4" d="M32.52,54.17c-11.06,0-20-9.26-20-20.67s9-20.68,20-20.68,20,9.26,20,20.68S43.59,54.17,32.52,54.17Z" style="fill: none;"/&gt;&lt;path class="cls-4" d="M0,0V81.14H68V0ZM6.69,33.5c0-14.73,11.56-26.67,25.83-26.67S58.36,18.77,58.36,33.5,46.79,60.16,32.52,60.16,6.69,48.22,6.69,33.5Z" style="fill: none;"/&gt;&lt;/g&gt;&lt;/g&gt;&lt;/svg&gt;
    &lt;/div&gt;
  
    &lt;div class="step one active"&gt;
      &lt;svg height="40" width="40"&gt;&lt;circle cx="50%" cy="50%" r="50%"/&gt;&lt;/svg&gt;
  
      &lt;p&gt;Sign up&lt;/p&gt;
    &lt;/div&gt;
  
    &lt;div class="step two"&gt;
      &lt;svg height="40" width="40"&gt;&lt;circle cx="50%" cy="50%" r="50%"/&gt;&lt;/svg&gt;
  
      &lt;p&gt;Sign up&lt;/p&gt;
    &lt;/div&gt;
  
    &lt;div class="step three"&gt;
      &lt;svg height="40" width="40"&gt;&lt;circle cx="50%" cy="50%" r="50%"/&gt;&lt;/svg&gt;
  
      &lt;p&gt;Sign up&lt;/p&gt;
    &lt;/div&gt;
  
    &lt;div class="step four"&gt;
      &lt;svg height="40" width="40"&gt;&lt;circle cx="50%" cy="50%" r="50%"/&gt;&lt;/svg&gt;
  
      &lt;p&gt;Sign up&lt;/p&gt;
    &lt;/div&gt;
  
    &lt;div class="step five"&gt;
      &lt;svg height="40" width="40"&gt;&lt;circle cx="50%" cy="50%" r="50%"/&gt;&lt;/svg&gt;
  
      &lt;p&gt;Sign up&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>