在当前幻灯片中显示div

Question

我使用滑块滑动，我试图只在当前幻灯片上显示一些带引号的div。我试着这样做：

function displayQuote() {
 if ($('div').hasClass("slick-current")) {
  $(this).find('.quote').css('display', 'block');
 }
}
displayQuote();

但它不起作用。这是完整的代码： http://codepen.io/pjmtokyo/pen/JYyjew

我只是初学者所以我很感激任何帮助

Answer 1

比这更简单。首先，您需要隐藏所有字幕。隐藏字幕后，您需要显示当前幻灯片的标题。当幻灯片变为活动状态（当前幻灯片）时，它会为其提供一个灵活的类。您使用它并在该类中显示标题。以下是它的代码。我希望这能解决你的问题。

figcaption {
   display: none;
}

.slick-active figcaption {
  display: block;
}