Question

我有一个Slick slider工作正常。我在两个事件'init'和'afterChange'中的代码几乎相同 - 除了变量thisSlide。

我的问题：如何将此功能放在可以使用当前幻灯片作为参数调用的函数中？下面的代码有效，但我想在两个事件中重用它。如果我把它放在一个函数中并运行它，我会得到一个错误，即未定义光滑。

代码：

// 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

您可以通过传递所有常用功能参数来实现您的愿望输出，请在下面的代码段中获取更多信息..

// 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>

滑动滑块 - 如何创建在事件中使用的功能？

1 个答案: