javascript 不光滑的方法不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27798824/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
unslick method not working
提问by Richlewis
I am trying to work out why the unslick method isn't working when I am calling it after a successful ajax call. I have read thispost and am looking for the slick-initializedclass, but I am still getting the error
我试图弄清楚为什么在成功调用 ajax 之后调用 unslick 方法时它不起作用。我已经阅读了这篇文章并正在寻找slick-initialized课程，但我仍然收到错误
TypeError: .$slides is null if (.$slides.parent().hasClass('slick-track'))
TypeError: .$slides is null if (.$slides.parent().hasClass('slick-track'))
HTML
HTML
<div id="skills" class="skills_section">
<div>Slide 1</div>
<div>Slide 2</div>
<div>Slide 3</div>
</div>
When I initialize slick on page load the markup will look like this:
当我在页面加载上初始化 slick 时，标记将如下所示：
<div id="skills" class="skills_section slick-initialized slick-slider">
<div class="slick-list draggable">
<div class="slick-track">
<div class="slick-slide slick-cloned">Slide 1</div>
<div class="slick-slide slick-cloned">Slide 2</div>
<div class="slick-slide slick-cloned">Slide 3</div>
</div>
</div>
</div>
I have an ajax call that will just replace the data in each slick-slide
我有一个 ajax 调用，它只会替换每个 slick-slide
$.ajax({
type: 'get',
url: '/public/index',
dataType: 'script',
data: data_send,
success: function(data) {
unSlickCarousel();
slickCarousel();
}
});
Functions
职能
function slickCarousel() {
$('.skills_section').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 1
});
}
function unSlickCarousel() {
if($('#skills').hasClass('slick-initialized')){
$('.skills_section').unslick();
}
}
But as I have mentioned I get the error and the HTML markup looks like this
但正如我所提到的，我得到了错误，HTML 标记看起来像这样
<div id="skills" class="skills_section slick-initialized slick-slider">
<div>Slide 1</div>
<div>Slide 2</div>
<div>Slide 3</div>
</div>
回答by Adam Hughes
I believe the way you call slick methods has changed.
我相信你调用灵活方法的方式已经改变。
Instead of $('.skills_section').unslick();
代替 $('.skills_section').unslick();
try $('.skills_section').slick("unslick");
尝试 $('.skills_section').slick("unslick");
You call also call this directly inside the responsive option in the slick options
您也可以直接在光滑选项中的响应选项中调用它
回答by Prabhas Nayak
Use setTimeout for initialising slick()
使用 setTimeout 初始化 slick()
function slickCarousel() {
setTimeout(function(){
$('.skills_section').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 1
});
}, 100);
}
回答by dzny
I've never seen this error message before.
我以前从未见过此错误消息。
I'm going to assume the 3 instances of "slick-cloned" in your stackoverflow example is just a copy/paste error. If you really have "slick-cloned" appearing all those times, there's your error. the unslick() method needs to remove all "slick-cloned" slides as part of the process. If it removes all of your slides, then that's why slides is null.
我将假设您的 stackoverflow 示例中的 3 个“光滑克隆”实例只是复制/粘贴错误。如果您真的一直出现“光滑克隆”，那就是您的错误。作为过程的一部分， unslick() 方法需要删除所有“光滑克隆”的幻灯片。如果它删除了您的所有幻灯片，那么这就是幻灯片为空的原因。
Read line 627 on the actual js file to see that it does this: https://github.com/kenwheeler/slick/blob/master/slick/slick.js
阅读实际 js 文件上的第 627 行以查看它是否执行此操作：https: //github.com/kenwheeler/slick/blob/master/slick/slick.js
