matthew matthew - 6 months ago 19
jQuery Question

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

I've been using the Slick carousel from here: and it seems promising, but I'm having problems. I'm trying to use the "Add & Remove" demo, and while I've got it stylistically identical, the JS code for the buttons is not working.

Here's a fiddle of what I have (It has a bunch of external resources):

Please let me know if you have any idea what is going awry here. Thank you!


<section id="features" class="blue">
<div class="content">
<hr id="demos"/>
<h2>Add & Remove</h2>
<div class="slider add-remove">

<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>



slidesToShow: 3,
slidesToScroll: 3

$('.js-add-slide').on('click', function() {
$('.add-remove').slick('slickAdd','&lt;div&gt;&lt;h3&gt;' + slideIndex +

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



Two problems that I saw on the console tab.

First: slideIndex wasn't declared.

To fix add this:

var slideIndex = 0;


Syntax error on this line:

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

To fix that, change that to just:

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