在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--; 
    } 
    }); 

});