更改光滑滑块

时间:2017-11-19 21:09:20

标签: javascript jquery html css slick-slider

我正在使用 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>

1 个答案:

答案 0 :(得分:1)

您应该像这样

参考滑块特有的标题
  $('.category-slider')
   .on('afterChange', function(event, slick, currentSlide, nextSlide){

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