使用JQuery和Slick过滤产品转盘

Filtering a product carousel using JQuery and Slick

本文关键字：过滤 JQuery Slick 使用      更新时间：2023-09-26

我正在构建一个产品转盘，下面有供应商按钮，可以过滤它们。因此，最初显示的是所有的产品徽标，但按下"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滑块，然后收听点击#按钮苹果。我使用内置的slickFilter方法，然后在按钮上设置一些样式，以直观地显示按钮已被选中。但正如您可能已经意识到的那样，为每个供应商创建一个新的Javascript函数是非常低效的。有没有办法让函数充分了解你刚刚点击的内容，让它使用相同的函数，无论你点击了哪个函数？此外，设置var filtered的方法也有点缺陷，因为单击另一个供应商（目前）只会进行未筛选，而不是未筛选，然后重新筛选到该供应商——因此该函数应该知道您单击的供应商按钮是否已经过筛选并采取行动。

对于任何了解slick的人来说，补充问题是——当幻灯片数量少于要显示的幻灯片数量时，有没有办法将所有项目集中在滑块区域？

http://jsfiddle.net/8vLs9qp6/

所以我放弃了寻找特定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选项，但似乎没有多大作用。我可能用错了。

使用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;
}
相关文章：