title: Numbering visible items in with Slick carousel
body: <p>I am using the slick.js to show a grid of 6 items (2 rows, 3 column) per slide. I need normal prev and next arrow navigation, but also wish to display the active item count as a form of pagination help.</p>
  
  <p>So if on the second slide, the text should read 'Showing 7 - 12 of x results'. I can only find ways to show slide number, not item, and this text needs to update whenever the slides are navigated through. </p>
  
  <p>Unless there is a slick option that I haven't found, I'd have to loop through all the items,  indexing them all with numbers and find what ones have the parent class '.slick-active'. But I haven't been successful. </p>
  
  <p>I'm also struggling to show the total items, as the closest thing slick seems to offer is slidecount, but that's related to the slides, not the items within.</p>
  
  <p>One catch is these items won't always be a perfect multiple of 6, so the last page is likely to have less than 6 items.</p>
  
  <p>Codepen attached. Many thanks!</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>$('.carousel').slick({
    rows: 2,
    slidesToShow: 3,
    slidesToScroll: 3,
    autoplay: false,
    arrows: true,
    infinite: false,
    draggable: false,
    prevArrow: $('.prev'),
    nextArrow: $('.next')
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.item {
    background: silver;
    color: black;
    text-align: center;
    font-size: 30px;
    display: inline;
    border: 5px solid white;
  }
  .nav {
    width: 100%;
  }
  .nav p{
    width: 50%;
    float: left;
    display: block;
    text-align: center;
  }
  .results {
    text-align: center;
    width: 100%;
    padding-top: 10px
  }</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;link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css" rel="stylesheet"/&gt;
  &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css" rel="stylesheet"/&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.js"&gt;&lt;/script&gt;
  
  
  &lt;div class="carousel"&gt;
    &lt;div class="item"&gt;1&lt;/div&gt;
    &lt;div class="item"&gt;2&lt;/div&gt;
    &lt;div class="item"&gt;3&lt;/div&gt;
    &lt;div class="item"&gt;4&lt;/div&gt;
    &lt;div class="item"&gt;5&lt;/div&gt;
    &lt;div class="item"&gt;6&lt;/div&gt;
    &lt;div class="item"&gt;7&lt;/div&gt;
    &lt;div class="item"&gt;8&lt;/div&gt;
    &lt;div class="item"&gt;9&lt;/div&gt;
    &lt;div class="item"&gt;10&lt;/div&gt;
    &lt;div class="item"&gt;11&lt;/div&gt;
    &lt;div class="item"&gt;12&lt;/div&gt;
    &lt;div class="item"&gt;13&lt;/div&gt;
    &lt;div class="item"&gt;14&lt;/div&gt;
    &lt;div class="item"&gt;15&lt;/div&gt;
    &lt;div class="item"&gt;16&lt;/div&gt;
    &lt;div class="item"&gt;17&lt;/div&gt;
    &lt;div class="item"&gt;18&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="nav"&gt;
    &lt;p class="prev"&gt;prev&lt;/p&gt;
    &lt;p class="next"&gt;next&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class="results"&gt;
    Showing 1 to 9 of [total] results
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>