javascript - 使用 JQuery 和 Slick 过滤产品轮播

标签 javascript jquery twitter-bootstrap slider carousel

我正在构建一个产品轮播,下面有 vendor 按钮,允许您过滤它们。因此,最初显示的是所有产品 Logo ,但按“Adobe”(例如)按钮会过滤掉所有非 Adob​​e 产品,再次按该按钮将取消过滤。

我使用 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 区域中的所有项目居中?

http://jsfiddle.net/8vLs9qp6/

最佳答案

因此,我设法通过放弃寻找特定 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/

相关文章:

css - 向右和向左拉在移动设备上不起作用

html - 在按钮中悬停时切换图像

javascript - Chrome是否保留每个对象的构造函数?

JavaScript "normalize event object"

javascript - JSON CSRF/盗窃攻击是否仍然可能?

javascript - 如何在根页面上突出显示索引导航链接

javascript - Select2 在 ASP.Net UserControl 中不工作

jquery - 使用 jQuery CSS 属性更改背景图像不起作用

jquery - 在网页中悬停时弹出

javascript - 如何在单元测试中调用 $(document).ready(function() {})