title: Slick Carousel how to get current slide as a dom or jquery object?
body: <p>Using <a href="http://kenwheeler.github.io/slick/" rel="noreferrer">slick</a>, I have a simple carousel along the lines of:</p>
  
  <pre><code>&lt;div class="carousel"&gt;
    &lt;div class="image"&gt;&lt;img src="http://path/to/image.jpg" data-caption="Caption 1"&gt;&lt;/div&gt;
    &lt;div class="image"&gt;&lt;img src="http://path/to/image2.jpg" data-caption="Caption 2"&gt;&lt;/div&gt;
    &lt;div class="image"&gt;&lt;img src="http://path/to/image3.jpg" data-caption="Caption 3"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I am initializing the carousel with an <code>onAfterChange</code> function to try to update the caption in another div but am a bit confused about how to get this div as a dom or jquery object?</p>
  
  <pre><code>$('.carousel').slick({
    lazyLoad: 'progressive',
    onAfterChange: function(slider,index){
      console.log(???);
    }
  });
  </code></pre>
  
  <p>Where <code>slider</code> returns the carousel object and <code>index</code> returns the current slide.</p>
  
  <p>How could I get the <code>data-caption</code> value out of this?</p>