使用JQuery和Slick过滤产品传送带

Question

我正在构建一个产品的旋转木马，下面有供应商按钮，允许您过滤它们。因此，最初的显示是所有的产品标识，但按下' Adobe‘(例如)按钮，然后过滤掉所有不是Adobe产品的内容，并再次按下按钮将其取消过滤。

我使用带有Slick的JQuery，然后使用一些自定义的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函数是非常低效的。有没有一种方法可以让函数充分了解你刚刚点击的内容，以便无论你点击的是哪一个函数，它都可以使用相同的函数？此外，设置过滤的变量的方法也有一点缺陷，因为单击另一个供应商将(目前)只是取消过滤，而不是取消过滤，然后重新过滤到该供应商-因此函数应该知道您单击的供应商按钮是否已经过滤并对其执行操作。

任何人谁知道slick的补充问题-有没有一种方法来居中的所有项目在滑块区域时，有少于slidesToShow的数量？

http://jsfiddle.net/8vLs9qp6/

Answer 1

因此，我设法解决了这个问题，放弃了查找特定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选项，但似乎效果不是很好。我可能用错了。

Answer 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;
}