twitter-bootstrap 使用 JQuery 和 Slick 过滤产品轮播
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26098746/
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
Filtering a product carousel using JQuery and Slick
提问by PeteSE4
I'm building a carousel of product which has vendor buttons below that allow you to filter them. So the initial display is all the product logos, but pressing the 'Adobe' (for example) button then filters out everything that is not an Adobe product, and pressing the button again unfilters it.
我正在构建一个产品轮播，其下方有供应商按钮，可让您对其进行过滤。所以最初显示的是所有产品标志，但按下“Adobe”（例如）按钮然后过滤掉所有不是 Adobe 产品的东西，再次按下按钮取消过滤。
I'm using JQuery with Slick and then a bit of custom javascript to handle the filtering. Let's start with the HTML.
我将 JQuery 与 Slick 一起使用，然后使用一些自定义 javascript 来处理过滤。让我们从 HTML 开始。
<div class="container" >
<div class="row">
<div class="col-xs-12">
<div class="product-carousel">
<div class="item filter-apple"><img class="product" src="images/products/product-fcp7.png" /></div>
<div class="item filter-apple"><img class="product" src="images/products/product-fcpx.png" /></div>
<div class="item filter-apple"><img class="product" src="images/products/product-motion5.png" /></div>
<div class="item filter-adobe"><img class="product" src="images/products/product-aftereffects.png" /></div>
<div class="item filter-adobe"><img class="product" src="images/products/product-encore.png" /></div>
<div class="item filter-adobe"><img class="product" src="images/products/product-indesign.png" /></div>
<div class="item filter-avid"><img class="product" src="images/products/product-mediacomposer.png" /></div>
<div class="item filter-adobe"><img class="product" src="images/products/product-photoshop.png" /></div>
<div class="item filter-adobe"><img class="product" src="images/products/product-premierepro.png" /></div>
<div class="item filter-davinci"><img class="product" src="images/products/product-resolve.png" /></div>
<div class="item filter-autodesk"><img class="product" src="images/products/product-smoke.png" /></div>
</div>
<div class="vendors-wrapper">
<ul class="vendors">
<li><button class="btn btn-xs btn-primary product-button" id="button-apple">Apple</button></li>
<li><button class="btn btn-xs btn-primary product-button" id="button-adobe">Adobe</button></li>
<li><button class="btn btn-xs btn-primary product-button" id="button-avid">Avid</button></li>
<li><button class="btn btn-xs btn-primary product-button" id="button-davinci">Davinci</button></li>
<li><button class="btn btn-xs btn-primary product-button" id="button-autodesk">Autodesk</button></li>
</ul>
</div>
</div>
</div>
</div>
As you can see, I'm using a class on the item divs so I can filter them later. Here's the Javascript:
如您所见，我在项目 div 上使用了一个类，以便稍后对其进行过滤。这是Javascript：
$(document).ready(function(){
$('.product-carousel').slick({
slidesToShow: 8,
autoplay: true
});
});
var filtered = false;
$('#button-apple').on('click', function(){
if(filtered === false) {
$('.product-carousel').slickUnfilter();
$('.product-carousel').slickFilter('.filter-apple');
$('.product-carousel').slickGoTo(0);
$('.product-button').attr('class', 'btn btn-xs btn-default product-button');
$(this).attr('class', 'btn btn-xs btn-primary product-button');
filtered = true;
} else {
$('.product-carousel').slickUnfilter();
$('.product-button').attr('class', 'btn btn-xs btn-primary product-button');
filtered = false;
}
});
This initiates the Slick slider, then listens for a click on the #button-apple. I'm using the built-in slickFilter method and then a bit of styling on the buttons to visually show that button has been selected. But as you've probably realised, creating a new Javascript function for every vendor is horribly inefficient. Is there a way for the function to know enough about what you've just clicked on for it to use the same function regardless of which one you clicked? Also, the method of setting the var filtered is also a bit flawed since clicking another vendor will (currently) just unfilter rather than unfilter then re-filter to that vendor - so the function ought to know whether the vendor button you've clicked on is already filtered and act on that.
这将启动 Slick 滑块，然后监听对 #button-apple 的点击。我正在使用内置的 slickFilter 方法，然后在按钮上使用一些样式来直观地显示该按钮已被选中。但正如您可能已经意识到的那样，为每个供应商创建一个新的 Javascript 函数是非常低效的。有没有办法让函数充分了解您刚刚单击的内容，以便无论您单击哪个函数，它都可以使用相同的函数？此外，设置 var 过滤的方法也有点缺陷，因为单击另一个供应商将（当前）只是取消过滤而不是取消过滤然后重新过滤到该供应商 - 因此该功能应该知道您是否点击了供应商按钮已经过滤并采取行动。
Supplementary question for anyone who knows slick - is there a way to centre all the items in the slider area when there are less than the number of slidesToShow?
对任何了解 slick 的人的补充问题 - 当少于 slidesToShow 的数量时，是否有办法将滑块区域中的所有项目居中？
回答by PeteSE4
So I managed to figure this one out by abandoning the method of looking for a specific id click and instead pulling the vendor name from the id of the list and then using that as a variable. New HTML:
因此，我放弃了查找特定 id 单击的方法，而是从列表的 id 中提取供应商名称，然后将其用作变量，从而设法解决了这个问题。新的 HTML：
<div class="container" >
<div class="row">
<div class="col-xs-12">
<div class="product-carousel">
<div class="item filter-apple"><img class="product-selector" src="images/products/product-fcp7.png" /></div>
<div class="item filter-apple"><img class="product-selector" src="images/products/product-fcpx.png" /></div>
<div class="item filter-apple"><img class="product-selector" src="images/products/product-motion5.png" /></div>
<div class="item filter-adobe"><img class="product-selector" src="images/products/product-aftereffects.png" /></div>
<div class="item filter-adobe"><img class="product-selector" src="images/products/product-encore.png" /></div>
<div class="item filter-adobe"><img class="product-selector" src="images/products/product-indesign.png" /></div>
<div class="item filter-avid"><img class="product-selector" src="images/products/product-mediacomposer.png" /></div>
<div class="item filter-adobe"><img class="product-selector" src="images/products/product-photoshop.png" /></div>
<div class="item filter-adobe"><img class="product-selector" src="images/products/product-premierepro.png" /></div>
<div class="item filter-davinci"><img class="product-selector" src="images/products/product-resolve.png" /></div>
<div class="item filter-autodesk"><img class="product-selector" src="images/products/product-smoke.png" /></div>
</div>
<div class="vendors-wrapper">
<ul class="vendors">
<li id="apple"><button class="btn btn-xs btn-primary product-button">Apple</button></li>
<li id="adobe"><button class="btn btn-xs btn-primary product-button">Adobe</button></li>
<li id="avid"><button class="btn btn-xs btn-primary product-button">Avid</button></li>
<li id="davinci"><button class="btn btn-xs btn-primary product-button">Davinci</button></li>
<li id="autodesk"><button class="btn btn-xs btn-primary product-button">Autodesk</button></li>
</ul>
</div>
</div>
</div>
And then the function to filter the products and change the button states.
然后是过滤产品和更改按钮状态的功能。
$('.product-button').on('click', function(){
var filtername = $(this).parent('li').attr('id');
var currentclass = $(this).attr('class');
if(currentclass == 'btn btn-xs btn-default product-button') {
// currently filtered, turn the others off and this on
$('.product-carousel').slickUnfilter();
$('.product-carousel').slickFilter('.filter-' + filtername);
$('.product-carousel').slickGoTo(0);
$('.product-button').attr('class', 'btn btn-xs btn-default product-button');
$(this).attr('class', 'btn btn-xs btn-primary product-button');
} else {
// is this the only currently selected vendor or are they all active?
var numberactive = $('.vendors').find('.btn-default').length;
if(numberactive > 0) {
// toggle them all back on
$('.product-carousel').slickUnfilter();
$('.product-carousel').slickGoTo(0);
$('.product-button').attr('class', 'btn btn-xs btn-primary product-button');
} else {
// switch the others off
$('.product-carousel').slickUnfilter();
$('.product-carousel').slickFilter('.filter-' + filtername);
$('.product-carousel').slickGoTo(0);
$('.product-button').attr('class', 'btn btn-xs btn-default product-button');
$(this).attr('class', 'btn btn-xs btn-primary product-button');
}
}
});
Still would appreciate if anyone knows how to centre items in the slick display window. Currently always seems to be left justified (which looks a bit odd in a wide window when you've filtered down to just one product). Tried the centerMode option, but doesn't seem to do much. I may be using it incorrectly.
如果有人知道如何在光滑的显示窗口中居中显示项目，仍然会很感激。目前似乎总是合理的（当您过滤到只有一种产品时，在宽阔的窗口中看起来有点奇怪）。尝试了 centerMode 选项，但似乎没什么用。我可能没有正确使用它。
回答by Nallie
Centered the carousel items with css. https://jsfiddle.net/jnallie/hr1155fm/
使用 css 将轮播项目居中。https://jsfiddle.net/jnallie/hr1155fm/
body {
background: black;
}
.vendors {
list-style: none;
text-align: center;
margin: 0px;
margin-bottom:10px;
padding: 0px;
}
.product-carousel .item {
background: green;
text-align: center;
margin: 0 5px;
}
.product-carousel .item img {
margin: 0 auto;
}
.vendors li {
display: inline-block;
}
.product-selector {
width: 64px;
}
