title: vertical slick carousel custom dots
body: <p>Good afternoon
  e modified this slick carousel, which contains custom dots, which show the current slider, with the amount of dotscount ex.(3/5).
  Will there be any possibility to change the color to the current slider?
  (1/5), (2/5), (3/5) ... etc
  where 1, 2, 3 would be in a different color from 5</p>
  
  <p>here is the slider
  <a href="https://testslick.000webhostapp.com/" rel="nofollow noreferrer">https://testslick.000webhostapp.com/</a></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>var $slider = $("#slider");
  $slider.on('init', function() {
      mouseWheel($slider);
  }).slick({
      dots: true,
      centerPadding: '0px',
      vertical: true,
      autoplay: true,
      autoplaySpeed: 2900,
      slidesToShow: 1,
      slidesToScroll: 1,
      arrows: true,
      verticalSwiping: true,
      adaptiveHeight: true,
      infinite: true,
      prevArrow: '&lt;div class="slick-prev"&gt;&lt;i class="fa fa-angle-left" aria-hidden="true"&gt;&lt;/i&gt;&lt;/div&gt;',
      nextArrow: '&lt;div class="slick-next"&gt;&lt;i class="fa fa-angle-right" aria-hidden="true"&gt;&lt;/i&gt;&lt;/div&gt;',
      dotsClass: 'slider-paging-number',
      customPaging: function($slider) {
  
  
          return ($slider.currentSlide + 1) + ' / ' + $slider.slideCount;
  
      }
  }).on('afterChange', function(event, $slider, currentSlide) {
  
  
  
      $(this).find('*[role="tablist"]').find('li').eq(0).text($slider.options.customPaging.call(this, $slider, currentSlide));
  
  })
  
  function mouseWheel($slider) {
      $(window).on('mousewheel', {
          $slider: $slider
      }, mouseWheelHandler);
  }
  
  function mouseWheelHandler(event) {
      event.preventDefault();
      var $slider = event.data.$slider;
      var delta = event.originalEvent.deltaY;
      if (delta &gt; 80) {
          $slider.slick('slickPrev');
      } else {
          $slider.slick('slickNext');
      }
  }
  
  
  $('.prev').click(function() {
      $slider.slick('slickPrev');
  });
  
  
  $('.next').click(function() {
      $slider.slick('slickNext');
  
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.slider-paging-number li:nth-child(1n+2) {
    display: none;
    cursor: context-menu;
  }
  
  .slider-paging-number li {
    list-style: none;
    font-family: Calibri, Candara, Segoe, 'Segoe UI', Optima, Arial, sans-serif;
    cursor: context-menu;
    font-size: 15px;
    font-weight:800;
    padding: 16px;
    background-color: white;
    position: absolute;
    right: 50px;
    bottom:4px;
    z-index: 99999;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="slider" class=""&gt;
  
      &lt;div id="ones" &gt;
        &lt;img src="img/foto1.png" alt=""&gt;
      &lt;/div&gt;
          &lt;div id="two"&gt;
        &lt;img src="img/foto2.png" alt=""&gt;
      &lt;/div&gt;
              &lt;div id="three"&gt;
        &lt;img src="img/foto3.png" alt=""&gt;
      &lt;/div&gt;
              &lt;div id="four"&gt;
        &lt;img src="img/foto4.png" alt=""&gt;
      &lt;/div&gt;
              &lt;div id="five"&gt;
        &lt;img src="img/foto5.png" alt=""&gt;
      &lt;/div&gt;
  
          &lt;/div &gt;
  
  &lt;div class="arrows"&gt;
    &lt;div class="prev"&gt;&lt;span class="fa fa-angle-up"&gt;&lt;/span&gt;&lt;/div&gt;
  &lt;div class="next"&gt;&lt;span class="fa fa-angle-down"&gt;&lt;/span&gt;&lt;/div&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>