facing this error " Uncaught ReferenceError: slideIndex is not defined " in slick.js

Question

我使用 slick.js 作为滑块功能。

我的代码如下，但我遇到了这个错误“Uncaught ReferenceError: slideIndex is not defined”。

<div class=" add-remove ">
   <h3>1</h3>
</div>
<div class="buttons">
   <a href="javascript:void(0)" class="button js-add-slide">Add Slide</a>
   <a href="javascript:void(0)" class="button js-remove-slide">Remove Slide</a>
</div>

<script>    
    $(document).ready(function(){

    $('.add-remove').slick({
      slidesToShow: 3,
      slidesToScroll: 3
    });
    $('.js-add-slide').on('click', function() {
      slideIndex++;
      $('.add-remove').slick('slickAdd','<div><h3>' + slideIndex + '</h3></div>');
    });

    $('.js-remove-slide').on('click', function() {
      $('.add-remove').slick('slickRemove',slideIndex - 1);
      if (slideIndex !== 0){
        slideIndex--;
      }
    });

    });

</script>

如果有人有解决此错误的想法，请帮助我。 谢谢。

Answer 1

slideIndex 是一个变量。它没有定义。

在 $(document).ready(function() {

中声明 slideIndex

$(document).ready(function() {
  var slideIndex = 0; // Add this piece of code
  $('.add-remove').slick({
    slidesToShow: 3,
    slidesToScroll: 3
  });
  $('.js-add-slide').on('click', function() {
    slideIndex++;
    $('.add-remove').slick('slickAdd', '<div><h3>' + slideIndex + '</h3></div>');
  });

  $('.js-remove-slide').on('click', function() {
    $('.add-remove').slick('slickRemove', slideIndex - 1);
    if (slideIndex !== 0) {
      slideIndex--;
    }
  });

});