在slick.js中面对此错误“未捕获的ReferenceError：slideIndex未定义”

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> 

帮助我，如果有人有想法解决这个错误。 Thankyou。

Answer 1

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

声明slideIndex内部$(document).ready(function() {

$(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--; 
    } 
    }); 

});