изменить свойства кнопки, если скользящий слайд является первым, вторым, третьим и т. д. - PullRequest
Новая
       9

изменить свойства кнопки, если скользящий слайд является первым, вторым, третьим и т. д.

0 голосов
/ 22 апреля 2020

Это мой первый раз, когда я использую Slick, и я довольно плохо знаком с jQuery в целом, и поиск этой проблемы только запутывает меня.

У меня есть 3 слайда в карусели, которые выглядят так: 

    <div class="slick-container">
      <!-- FIRST SLIDE -->
      <div class="slick-slide first">
        <div class="top-container"><img src="1_FTS_Prenatal_US_every_preanatal_user_popup_1_v2.jpg" style="width:100%;"/></div>
        <div class="bottom-container">
          <p class="message">Text</p>
        </div>
      </div>

      <!-- SECOND SLIDE -->
      <div class="slick-slide second">
        <div class="top-container"><img src="2_FTS_Prenatal_US_every_preanatal_user_popup_2.jpg" style="width:100%;"/></div>
        <div class="bottom-container">
          <p class="message">Text</p>
        </div>
      </div>

      <!-- THIRD SLIDE -->
      <div class="slick-slide third">
        <div class="top-container"><img src="3_FTS_Prenatal_US_every_preanatal_user_popup_3_v3.jpg" style="width:100%;"/></div>
        <div class="bottom-container">
          <p class="message">Text</p>
        </div>
      </div>
    </div>

Под слайдами есть кнопка: 

    <footer>
      <div class="button-center">
      </div>
    </footer>

Я хочу вставить другую гиперссылку и текст в кнопку div, в зависимости от того, какой слайд отображается в данный момент. Я нашел примеры, ссылающиеся на «currentSlide» и его индекс, но ни один из тестируемых примеров кода не вернет индекс текущего слайда.

Я пытался использовать onBeforeChange, например: 

$('.slick-container').slick({
  infinite: false,
  edgeFriction: 0,
  prevArrow: false,
  nextArrow: $('.button-right'),
  dots: true,
  customPaging : function() {
    return '<span class="slick-dot"></span>'
  },
  beforeChange: function() {
    console.log($(slick.$slides.get(currentSlide).attr('class')));
  }
});

ожидая, что он запишет 'button-center' на консоль, но этого также не происходит.

Я уверен, что есть простой способ сделать это, но я в растерянности.

...