我正在构建一个产品轮播,下面有 vendor 按钮,允许您过滤它们。因此,最初显示的是所有产品 Logo ,但按“Adobe”(例如)按钮会过滤掉所有非 Adobe 产品,再次按该按钮将取消过滤。
我使用 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>
如您所见,我在项目 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 slider ,然后监听 #button-apple 上的单击。我使用内置的 slickFilter 方法,然后在按钮上进行一些样式设置,以直观地显示该按钮已被选中。但正如您可能已经意识到的那样,为每个 vendor 创建新的 Javascript 函数效率极低。有没有一种方法可以让该函数充分了解您刚刚单击的内容,以便无论您单击哪一个,它都可以使用相同的函数?此外,设置 var 过滤的方法也有点缺陷,因为单击另一个 vendor (当前)只会取消过滤,而不是取消过滤然后重新过滤到该 vendor - 因此该函数应该知道您是否单击了 vendor 按钮已被过滤并采取行动。
对于任何了解 slick 的人的补充问题 - 当幻灯片数量少于 SlidesToShow 的数量时,是否有办法使 slider 区域中的所有项目居中?
最佳答案
因此,我设法通过放弃寻找特定 id 点击的方法,而是从列表 id 中提取 vendor 名称,然后将其用作变量来解决这个问题。新的 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 选项,但似乎没有多大作用。我可能使用不当。
关于javascript - 使用 JQuery 和 Slick 过滤产品轮播,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26098746/