关键词：
【中文标题】jQuery 光滑的滑块过滤器【英文标题】：jQuery slick slider filter 【发布时间】：2018-05-03 18:35:33 【问题描述】：我正在尝试使用包含不同电影的轮播创建响应式页面。我希望能够按流派过滤电影，并在轮播中一次只显示一个选定的流派。
我一开始尝试使用引导轮播，但似乎使用 jQuery 光滑滑块是可行的方法。 但我也读过一些人在使用 slick 和响应式设计时遇到问题。
这可能是 ja 文件中的内容，因为我会收到以下错误：
"Uncaught TypeError: $(...).slickUnfilter is not a function
at HTMLButtonElement.<anonymous> (slider.js:31)
at HTMLButtonElement.dispatch (jquery-1.11.0.min.js:3)
at HTMLButtonElement.r.handle (jquery-1.11.0.min.js:3)
(anonymous) @ slider.js:31
dispatch @ jquery-1.11.0.min.js:3
r.handle @ jquery-1.11.0.min.js:3"
我的 html 文件
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" type="text/css" href="../css/style.css">
<link rel="stylesheet" type="text/css" href="../css/sida.css">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="../slick/slick.css"/>
<link rel="stylesheet" tyoe="text/css" href="../slick/slick-theme.css">
<title>Sida</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body background="../images/background.jpg">
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div class="container" >
<div class="row">
<div class="col-xs-12">
<div class="movies-carousel">
<div class="item filter-Action"><img class="movies-selector" src="../images/hotfuzz.jpg" /></div>
<div class="item filter-Comedy"><img class="movies-selector" src="../images/superbad.jpg" /></div>
</div>
<div class="movie-wrapper">
<ul class="genres">
<li id="Action"><button class="btn btn-xs btn-primary movies-button">Action</button></li>
<li id="Comedy"><button class="btn btn-xs btn-primary movies-button">Comedy</button></li>
</ul>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<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" src="../js/slider.js"></script>
</body>
强文本
我的 javascript
$(document).ready(function()
$('.movies-carousel').slick(
);
);
$('.movies-button').on('click', function()
var filtername = $(this).parent('li').attr('id');
var currentclass = $(this).attr('class');
if(currentclass == 'btn btn-xs btn-default movies-button')
// currently filtered, turn the others off and this on
$('.movies-carousel').slickUnfilter();
$('.movies-carousel').slickFilter('.filter-' + filtername);
$('.movies-carousel').slickGoTo(0);
$('.movies-button').attr('class', 'btn btn-xs btn-default movies-button');
$(this).attr('class', 'btn btn-xs btn-primary movies-button');
else
// is this the only currently selected movie or are they all active?
var numberactive = $('.genres').find('.btn-default').length;
if(numberactive > 0)
// toggle them all back on
$('.movies-carousel').slickUnfilter();
$('.movies-carousel').slickGoTo(0);
$('.movies-button').attr('class', 'btn btn-xs btn-primary movies-button');
else
// switch the others off
$('.movies-carousel').slickUnfilter();
$('.movies-carousel').slickFilter('.filter-' + filtername);
$('.movies-carousel').slickGoTo(0);
$('.movies-button').attr('class', 'btn btn-xs btn-default movies-button');
$(this).attr('class', 'btn btn-xs btn-primary movies-button');
);
谢谢
【问题讨论】：
【参考方案1】：您收到 JavaScript 错误的原因是您对各种 slick 方法的引用未正确指定。您需要使用以下格式.slick('[methodName]')。例如：
// Incorrect
$('.movies-carousel').slickUnfilter();
// Correct
$('.movies-carousel').slick('slickUnfilter');
希望下面的代码对您有所帮助。
$(document).ready(function()
$('.movies-carousel').slick();
);
$('.movies-button').on('click', function()
var filtername = $(this).parent('li').attr('id');
var currentclass = $(this).attr('class');
if (currentclass == 'btn btn-xs btn-default movies-button')
// currently filtered, turn the others off and this on
$('.movies-carousel').slick('slickUnfilter');
$('.movies-carousel').slick('slickFilter', '.filter-' + filtername);
$('.movies-carousel').slick('slickGoTo', 0);
$('.movies-button').attr('class', 'btn btn-xs btn-default movies-button');
$(this).attr('class', 'btn btn-xs btn-primary movies-button');
else
// is this the only currently selected movie or are they all active?
var numberactive = $('.genres').find('.btn-default').length;
if (numberactive > 0)
// toggle them all back on
$('.movies-carousel').slick('slickUnfilter');
$('.movies-carousel').slick('slickGoTo', 0);
$('.movies-button').attr('class', 'btn btn-xs btn-primary movies-button');
else
// switch the others off
$('.movies-carousel').slick('slickUnfilter');
$('.movies-carousel').slick('slickFilter', '.filter-' + filtername);
$('.movies-carousel').slick('slickGoTo', 0);
$('.movies-button').attr('class', 'btn btn-xs btn-default movies-button');
$(this).attr('class', 'btn btn-xs btn-primary movies-button');
);
【讨论】：
光滑的滑块图像在加载时未正确居中
】光滑的滑块图像在加载时未正确居中【英文标题】：Slicksliderimagenotcenteringcorrectlyonload【发布时间】：2018-01-0221:24:53【问题描述】：我的光滑滑块在加载时没有显示完整的第一张幻灯片时遇到了问题。通过单击框标题打开内容di... 查看详情
html光滑的滑块视差(代码片段)
javascript光滑的滑块提示(代码片段)
javascript光滑的滑块刷新(代码片段)
text光滑的滑块动画(代码片段)
在光滑的滑块内居中项目
】在光滑的滑块内居中项目【英文标题】：Centeritemsinsideofslicksliderslide【发布时间】：2021-12-1705:58:24【问题描述】：我已经安装了光滑的滑块并且可以使用它。但是我在幻灯片内居中项目时遇到困难[请参考附图，如您所见，只有... 查看详情
光滑的滑块同步情况
】光滑的滑块同步情况【英文标题】：Slickslidersyncsituation【发布时间】：2015-10-0116:12:59【问题描述】：我正在使用slick的“滑块同步”功能，如果slidesToShow==幻灯片总数，则导航中的.slick-current类在顶部轮播滑动时不移动.这是html... 查看详情
html光滑的滑块用拇指(代码片段)
光滑的滑块 - css 过渡无限循环错误
】光滑的滑块-css过渡无限循环错误【英文标题】：slickslider-csstransitioninfiniteloopbug【发布时间】：2018-01-0610:18:21【问题描述】：我有一个使用光滑滑块设置的滑块。当使用下一个和上一个按钮时，该项目以一个很好的过渡进入查... 查看详情
光滑的滑块视频复制
】光滑的滑块视频复制【英文标题】：slickslidervideosduplicating【发布时间】：2017-03-2507:30:28【问题描述】：我正在使用slick滑块滑过6个视频，当它们是当前幻灯片时播放它们，视频播放但只有音频，html5播放器不播放视频，甚至不... 查看详情
光滑的滑块箭头看不到正确
】光滑的滑块箭头看不到正确【英文标题】：slicksliderarrownotseeingproperly【发布时间】：2018-03-0806:52:20【问题描述】：我知道在堆栈溢出中还有其他类似的问题，但似乎没有一个可以解决我的问题。我认为光滑的滑块默认会有箭头... 查看详情
反应光滑的滑块不通过道具
】反应光滑的滑块不通过道具【英文标题】：Reactslicksliderdoesn`tpassprops【发布时间】：2020-04-2712:26:44【问题描述】：我有几个带有Slider的组件。在第一个组件中，我收到道具。但在第二个组件中，我没有收到道具。下面是我的组... 查看详情
光滑的滑块 - 当滑块进入下一帧时暂停 YouTube 剪辑
】光滑的滑块-当滑块进入下一帧时暂停YouTube剪辑【英文标题】：Slickslider-PauseaYouTubeclipwhenslidergoestonextframe【发布时间】：2015-01-0915:46:42【问题描述】：我将光滑的滑块用作多画廊滑块，其中一个项目是YouTube剪辑。一切都很好，... 查看详情
光滑的滑块：在显示的图像之间添加空间
】光滑的滑块：在显示的图像之间添加空间【英文标题】：Slickslider:addingspaceinbetweenimagesshown【发布时间】：2017-12-1017:13:18【问题描述】：也许我只是在开玩笑，这是一件简单的事情，但我正在尝试在使用光滑滑块显示的图像之... 查看详情
调整窗口大小时，光滑的滑块没有响应
】调整窗口大小时，光滑的滑块没有响应【英文标题】：Slickslidernotbeingresponsivewhenresizingthewindow【发布时间】：2018-02-0622:35:26【问题描述】：我使用slickslider在WordPress中创建了一个图像滑块。我正在使用中心模式，我希望一张图... 查看详情
光滑的滑块同步 - 断点上的自定义箭头
】光滑的滑块同步-断点上的自定义箭头【英文标题】：SlicksliderSyncing-customarrowonbreakpoints【发布时间】：2019-07-2317:00:43【问题描述】：所以我有这个多滑块，我使用光滑的滑块同步来使这个滑块工作。一切都很好，除非我想在移... 查看详情
光滑的滑块下一个箭头不显示
】光滑的滑块下一个箭头不显示【英文标题】：SlickSliderNextArrowsnotshowing【发布时间】：2015-05-1322:42:21【问题描述】：我试图让下一个和上一个箭头显示在产品滑块旁边，就像在SlickSlider示例中一样。但我的示例似乎没有加载适当... 查看详情
光滑的滑块在弹性容器中不起作用
】光滑的滑块在弹性容器中不起作用【英文标题】：Slickslidernotworkinginaflexcontainer【发布时间】：2018-02-0807:26:40【问题描述】：我正在尝试将光滑的轮播(http://kenwheeler.github.io/slick/)在列中垂直居中。所以我在列（光滑滑块的容器... 查看详情