使用JQuery和Slick过滤产品轮播

Question

我正在构建一个产品的旋转木马,下面有供应商按钮,可以过滤它们.因此,初始显示是所有产品徽标,但按下"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过滤的方法也有点缺陷,因为点击另一个供应商(当前)只是不过滤而不是不过滤然后重新过滤到该供应商 - 所以该功能应该知道你点击的供应商按钮已经过滤并采取行动.

任何知道光滑的人的补充问题 - 有什么方法可以在滑块数量少于幻灯片时显示滑块区域中的所有项目？

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选项,但似乎没有做太多.我可能错误地使用它.