添加和删除按钮在预制 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','<div><h3>' + slideIndex +
'</h3></div>');
});
$('.js-remove-slide').on('click', function() {
$('.add-remove').slick('slickRemove',slideIndex - 1);
if (slideIndex !== 0){
slideIndex--;
}
});
});
我在控制台选项卡上看到的两个问题。
第一个:
slideIndex
未声明。
要修复,请添加:
var slideIndex = 0;
第二个:
这一行的语法错误:
$('.add-remove').slick('slickAdd','<div><h3>' + slideIndex +
'</h3></div>');
要解决这个问题,请将其更改为:
$('.add-remove').slick('slickAdd','<div><h3>' + slideIndex +
'</h3></div>');
我一直在使用这里的 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','<div><h3>' + slideIndex +
'</h3></div>');
});
$('.js-remove-slide').on('click', function() {
$('.add-remove').slick('slickRemove',slideIndex - 1);
if (slideIndex !== 0){
slideIndex--;
}
});
});
我在控制台选项卡上看到的两个问题。
第一个:
slideIndex
未声明。
要修复,请添加:
var slideIndex = 0;
第二个:
这一行的语法错误:
$('.add-remove').slick('slickAdd','<div><h3>' + slideIndex +
'</h3></div>');
要解决这个问题,请将其更改为:
$('.add-remove').slick('slickAdd','<div><h3>' + slideIndex +
'</h3></div>');