matthew matthew - 2 months ago 7
jQuery Question

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

I've been using the Slick carousel from here: http://kenwheeler.github.io/slick/#getting-started 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): http://jsfiddle.net/uqgh5j18/1/

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

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

});

Answer

Two problems that I saw on the console tab.

First: slideIndex wasn't declared.

To fix add this:

var slideIndex = 0;

Second:

Syntax error on this line:

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

To fix that, change that to just:

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

Fiddle