Slick slider - how to create a function to use in events?

Question

I have a Slick slider which is working fine. I have almost identical code in two events, 'init' and 'afterChange' - except for the variable thisSlide.

My question: How can I put this functionality inside a function which can be called with the current slide as a parameter? The code below works but I would like to reuse it inside both events. If I put it inside a function as-is and run it, I get an error that slick is undefined.

The code:

// Variables
var $slideshow = $('.slide-gallery');

// Main slider options
var slickOptions = {
  slide: 'a',
  fade: true,
  arrows: true
}

// Run on first slider load
$slideshow.on('init', function(event, slick) {
  // Hide/show captions
  var thisSlide = slick.$slides[0];
  var hasCaption = ($(thisSlide).find(".caption").length > 0) ? true : false;
  if (hasCaption === false) {
    slick.$slides.find(".caption").slideUp(300);
  } else {
    slick.$slides.find(".caption").slideDown(300);
  }
});

// Init slider
var slider = $slideshow.slick(slickOptions);

// Run when slides change
$slideshow.on('afterChange', function(event, slick, currentSlide) {
  // Hide/show captions
  var thisSlide = slick.$slides[currentSlide];
  var hasCaption = ($(thisSlide).find(".caption").length > 0) ? true : false;
  if (hasCaption === false) {
    slick.$slides.find(".caption").slideUp(300);
  } else {
    slick.$slides.find(".caption").slideDown(300);
  }
});

jsFiddle here.

Answer 1

You can achieve your desire output by just by passing all parameters in common function please find below snippet for more info..

// Function to hide/show captions
function toggleCaptions(current) {
/* How can I pass a parameter which will get the acrual slide and run something like this:
  var thisSlide = slick.$slides[0];
  var hasCaption = ($(thisSlide).find(".caption").length > 0) ? true : false;
  if (hasCaption === false) {
    slick.$slides.find(".caption").slideUp(300);
  } else {
    slick.$slides.find(".caption").slideDown(300);
  }
  
  NOTE: Should work for both 'init' and 'afterChange' events...
  */
}

// Variables
var $slideshow = $('.slide-gallery');

// Main slider options
var slickOptions = {
  slide: 'a',
  fade: true,
  arrows: true
}

// Run on first slider load
$slideshow.on('init', function(event, slick) {
  // Hide/show captions
AllSet(event, slick);
});

// Init slider
var slider = $slideshow.slick(slickOptions);

// Run when slides change
$slideshow.on('afterChange', function(event, slick, currentSlide) {
  // Hide/show captions
  AllSet(event, slick, currentSlide);
});

function AllSet(event, slick, currentSlide)
{
  alert("Whoaaa!!");
  var thisSlide = slick.$slides[currentSlide];
  var hasCaption = ($(thisSlide).find(".caption").length > 0) ? true : false;
  if (hasCaption === false) {
    slick.$slides.find(".caption").slideUp(300);
  } else {
    slick.$slides.find(".caption").slideDown(300);
  }
}

body {
  padding: 15px 0;
}
.slide-gallery {
  width: 80%;
  margin: 0 auto;
}
.slick-slider * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/* Custom captions */

.slick-slide .caption {
  position: relative;
  width: 100%;
  color: #252525;
  line-height: 1.333333;
  z-index: 2;
  padding: 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://rawgit.com/kenwheeler/slick/master/slick/slick-theme.css" rel="stylesheet"/>
<link href="https://rawgit.com/kenwheeler/slick/master/slick/slick.css" rel="stylesheet"/>
<script src="https://rawgit.com/kenwheeler/slick/master/slick/slick.js"></script>
<!--              ^
    Use the FORK, Luke.
    create your own new fiddle test case.
-->
<div class="slide-gallery">
  <a href="#" class="slide-link">
    <div class="slide-content">
      <img src="https://lorempixel.com/825/450/people/1" alt="">
      <div class="caption">
        <h2>Caption 1</h2>
        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent luctus justo justo, vel luctus arcu tristique ac.</div>
      </div>
    </div>
  </a>
  <a href="#" class="slide-link">
    <div class="slide-content">
      <img src="https://lorempixel.com/825/450/people/2" alt="">
      <div class="caption">
        <h2>Caption 2</h2>
        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent luctus justo justo, vel luctus arcu tristique ac.</div>
      </div>
    </div>
  </a>
  <a href="#" class="slide-link">
    <div class="slide-content">
      <img src="https://lorempixel.com/825/450/people/3" alt="">
      <div class="caption">
        <h2>Caption 3</h2>
        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent luctus justo justo, vel luctus arcu tristique ac.</div>
      </div>
    </div>
  </a>
  <a href="#" class="slide-link">
    <div class="slide-content">
      <img src="https://lorempixel.com/825/450/people/4" alt="">
    </div>
  </a>
  <a href="#" class="slide-link">
    <div class="slide-content">
      <img src="https://lorempixel.com/825/450/people/5" alt="">
    </div>
  </a>

</div>