我正在使用Slick carousel插件创建一个视频轮播,用户可以添加,删除和过滤.我遇到的问题是,每当用户做一个事件(添加/删除/过滤)时,旋转木马上的所有视频都会重新加载,这给人一种笨重的感觉.
我发现重新加载可以停止,如果我进入slick.js并注释掉`_.$ slidesCache = _.$ slides;``,但是会破坏Filtering函数有没有办法阻止重新加载,同时仍保留所有函数？
JSFiddle:http://jsfiddle.net/neowot/eoov2ud1/37/
使用Javascript
$(document).ready(function(){
var slideId = 0;
var slides = [];
$('.add-remove').slick({
slidesToShow: 3,
slidesToScroll: 3
});
var target = '<div class="videowrapper"><iframe src="https://www.youtube.com/embed/7WgYmnwO-Pw" frameborder="0" allowfullscreen></iframe></div>';
$('.js-add-FirstClass-slide').on('click', function() {
$('.add-remove').slick('slickAdd','<div class="FirstClass" slide-id="' + slideId + '"><h3><a class="sliderX">X</a>' + target + '</h3></div>');
slides.push(slideId);
slideId++;
});
$('.js-add-SecondClass-slide').on('click', function() {
$('.add-remove').slick('slickAdd','<div class="SecondClass" slide-id="' + slideId + '"><h3><a class="sliderX">X</a>' + target + '</h3></div>');
slides.push(slideId);
slideId++;
});
var filtered = false;
$('.ToggleFirstClass').on('click', function() {
if (filtered …我没有让漂亮的轮播插件工作。我已经阅读了这里的所有主题，但我确信一切都很好。然而，似乎并非如此：D。这是我的代码：
<html>
<head>
<title>My Now Amazing Webpage</title>
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
</head>
<body>
<div class="test">
<div><img id="" width="300" height="200" src=""> </div>
<div><img id="" width="300" height="200" src=""> </div>
<div><img id="" width="300" height="200" src=""> </div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.test').slick({
setting-name: setting-value
});
});
</script>
</body>
</html>
我确定我需要的一切都已加载，这是来自 chrome 开发工具的屏幕
我还尝试通过 cdn.jsdelivr.net 包含 css。
我在网页中使用光滑的轮播来传递表单数据和信息。
但是我需要能够在轮播中选择文本。我认为通过将 draggable 设置为 false 我可以选择文本，但是光标形状更改为文本光标但我仍然无法选择文本。
有办法解决吗？
我是这样配置的：
$('.carousel').slick({
prevArrow: '.btn-prev-cand',
nextArrow: '.btn-next-cand',
dots: false,
speed: 500,
infinite: true,
accessibility: true,
adaptiveHeight: false,
arrows: true,
centerMode: false,
variableWidth: false,
draggable: false,
swipeToSlide: false
});
我已经完成了 ajax 调用来检索数据，并且想将图像放入 Slick 轮播中。
问题是 - 我读过 - Slick 只能看到静态数据，所以我必须在图像为 html 时关闭 Slick。
其编码应如下所示。
$('.slick-media').slick('unslick').slick('reinit');
但我得到了这个错误：
类型错误无法读取未定义的属性“unslick”
在我的代码中，我有 2 个 Slick 轮播。第一个是静态的，第二个是在 ajax 调用接收数据时通过 jQuery 构建的。
如果我尝试取消静态轮播，那么它就会起作用。但我无法取消第二个轮播，它是动态构建的（我收到错误）。
你有什么主意吗？
这就是我声明我的 2 个轮播的方式。
$(document).ready(function(){
$('.carousel').slick({
//properties
});
$('.product_carousel').slick({
//properties
});
});