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

Add and Remove buttons don't work in premade Slick Carousel

我一直在使用这里的 Slick 旋转木马:http://kenwheeler.github.io/slick/#getting-started 它看起来很有前途,但我遇到了问题。我正在尝试使用 "Add & Remove" 演示,虽然它在风格上完全相同,但按钮的 JS 代码无法正常工作。

这是我所拥有的fiddle(它有一堆外部资源):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','&lt;div&gt;&lt;h3&gt;' + slideIndex +
                               '&lt;/h3&gt;&lt;/div&gt;');
    });

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

});

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

第一个: slideIndex 未声明。

要修复,请添加:

var slideIndex = 0;

第二个:

这一行的语法错误:

$('.add-remove').slick('slickAdd','&lt;div&gt;&lt;h3&gt;' + slideIndex +
                               '&lt;/h3&gt;&lt;/div&gt;');

要解决这个问题,请将其更改为:

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

Fiddle