我正在构建一个产品的旋转木马，其下面有供应商按钮，可以过滤它们。因此，初始显示是所有产品徽标，但是按下“Adobe”（例如）按钮，然后筛选出不是Adobe产品的所有内容，再次按下该按钮就不会过滤。
我正在使用Slick和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>
正如你所看到的，我在项目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;
}
});
这将启动Slick滑块，然后在＃button-apple上单击。我正在使用内置的slickFilter方法，然后在按钮上进行一些样式化，以直观地显示该按钮已被选中。但是你可能已经意识到，为每个供应商创建一个新的Javascript函数是非常低效的。是否有一种方法可以让函数充分了解您刚刚点击的内容，无论您点击哪一个，它都可以使用相同的功能？此外，设置var过滤的方法也有点缺陷，因为点击另一个供应商（当前）只是不过滤而不是不过滤然后重新过滤到该供应商 - 所以该功能应该知道你点击的供应商按钮已被过滤并采取行动。
任何知道光滑的人的补充问题 - 当幻灯片的数量少于时，有没有办法将滑块区域中的所有项目居中？显示？
答案 0 :(得分：5)
所以我设法通过放弃寻找特定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>
然后是过滤产品并更改按钮状态的功能。
$('.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');
}
}
});
如果有人知道如何在光滑的显示窗口中居中项目，仍然会很感激。目前似乎总是左对齐（当你过滤到一个产品时，在宽大的窗口中看起来有点奇怪）。尝试了centerMode选项，但似乎没有做太多。我可能错误地使用它。
答案 1 :(得分：2)
用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;
}