javascript - 更改光滑 slider 的标题文本

Question

我正在使用 Slick Slider 作为我的图片幻灯片。对于每张幻灯片，我还有一个带有数据属性的标题。我希望此数据的信息会随着幻灯片放映之外的 div 中的每张幻灯片而改变，但出于任何原因，它只会显示我单击它时存储的第一个数据。

JS

$('.category-slider').on('afterChange', function(event, slick, currentSlide, nextSlide){
    var title = $(".title").data("project");
    $(".project").text(title);
});

HTML

这是我的数据标题:

<div class="projectTitle sans-s">
    <p class="title" data-project="<?php echo $project->projecttitle();?>">
    <?php echo $project->projecttitle();?></p>
</div>

每张幻灯片的数据应显示在此处:

<div class="project"></div>

Answer 1

你应该像这样引用特定于 slider 的标题

  $('.category-slider')
   .on('afterChange', function(event, slick, currentSlide, nextSlide){

    var title = $(this).find(".title").data("project");
    $(".project").text(title);
  });