添加和删​​除按钮在预制的 Slick Carousel 中不起作用

Question

我从这里开始使用 Slick 轮播：http://kenwheeler.github.io/slick/#getting-started，看起来很有希望，但我遇到了问题。我正在尝试使用“添加和删除”演示，虽然我的风格相同，但按钮的 JS 代码不起作用。

这是我所拥有的（它有一堆外部资源）：http://jsfiddle.net/uqgh5j18/1/

如果您知道这里出了什么问题，请告诉我。谢谢！

HTML

<section id="features" class="blue">
            <div class="content">       
                <hr id="demos"/>
                <h2>Add & Remove</h2>
                <div class="slider add-remove">
                    <div><h3>1</h3></div>
                    <div><h3>2</h3></div>
                </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>
            </div>
        </section>

JS

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

});

Answer 1

我在控制台选项卡上看到的两个问题。

第一： slideIndex 未声明。

要解决这个问题：

var slideIndex = 0;

第二：

这一行的语法错误：

$('.add-remove').slick('slickAdd','<div><h3>' + slideIndex +
                               '</h3></div>');

要解决这个问题，请将其更改为：

$('.add-remove').slick('slickAdd','<div><h3>' + slideIndex +
                               '</h3></div>');

Fiddle