有没有办法根据显示的轮播项目更改文本？

Question

我在三张幻灯片的每一张中都使用 slick.js 和表格/问题。在滑块上方，我有一个带有 "Question 1" 框的容器。我想要的是 "Question 1" 在显示问题 2 时更改为 "Question 2"，在显示问题 3 时更改为 "Question 3"。

我尝试设置一个 .on "afterChange" 函数，当我 console.log (this) 确实显示正确的轮播项目时，问题编号没有像我希望的那样动态变化

HTML: (one question....there are about five more)

$(surveySlider).on('afterChange', function(event, slick,
  currentSlide, nextSlide) {
  if ($('.survey-one').is(':visible')) {
    $('#survey-number').text('Question 1')
  }
  if ($('.survey-two').is(':visible')) {
    $('#survey-number').text('Question 2')
  }
  if ($('.survey-three').is(':visible')) {
    $('#survey-number').text('Question 3')
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- question number container -->
<div class="survey">
  <p class="survey-question-number" id="survey- 
    number">Question 1</p>
  <!-- WHAT I WANT TO CHANGE BASED ON QUESTION SHOWN
                </div>
                <!-- form -->
  <form id="form">
    <!-- slick slider / form questions -->
    <section class="survey-slider text-dark">
      <!-- inner container for survey -->
      <div class="survey-container">
        <!-- question 1 -->
        <div class="form-group survey-one">
          <p class="survey-title-question">question one</p>
          <label for="a"><input name="questionOne" type="radio" id="a" class="selection" value="A"/><span>A</span>
                                    A</label>
          <label for="b">
                                    <input name="questionOne" type="radio" id="b" class="selection" value="B"/><span>B</span>
                                    B</label>
          <label for="C">
                                    <input name="questionOne" type="radio" id="c" class="selection" value="c"/><span>C</span>
                                    C</label>
          <label for="D">
                                    <input name="questionOne" type="radio" id="D" class="selection" value="Dr"/><span>D</span>
                                   D</label>
        </div>
        <!-- end question 1 -->
      </div>
      <!-- inner container for survey end -->

根据轮播中显示的问题动态更改问题 1、2、3

Answer 1

看来 afterChange 事件将 currentSlide 作为其参数之一传递，该参数以数字形式作为索引。您可以针对 div 并在每次幻灯片迭代中更改它的文本，而不是对 div 可见性执行多次检查，预先增加零索引值：

$(surveySlider).on('afterChange',function(event, slick, currentSlide, nextSlide) {
  $('#survey-number').text('Question ' + ++currentSlide);
});

有没有办法根据显示的轮播项目更改文本？

Is there a way to change text based on carousel item shown?

html

css

jquery

slick.js