title: Filtering a product carousel using JQuery and Slick
body: <p>I'm building a carousel of product which has vendor buttons below that allow you to filter them. So the initial display is all the product logos, but pressing the 'Adobe' (for example) button then filters out everything that is not an Adobe product, and pressing the button again unfilters it.</p>
  
  <p>I'm using JQuery with Slick and then a bit of custom javascript to handle the filtering. Let's start with the HTML.</p>
  
  <pre><code>&lt;div class="container" &gt;
      &lt;div class="row"&gt;
          &lt;div class="col-xs-12"&gt;
              &lt;div class="product-carousel"&gt;
                  &lt;div class="item filter-apple"&gt;&lt;img class="product" src="images/products/product-fcp7.png"  /&gt;&lt;/div&gt;
                  &lt;div class="item filter-apple"&gt;&lt;img class="product" src="images/products/product-fcpx.png" /&gt;&lt;/div&gt;
                  &lt;div class="item filter-apple"&gt;&lt;img class="product" src="images/products/product-motion5.png" /&gt;&lt;/div&gt;
                  &lt;div class="item filter-adobe"&gt;&lt;img class="product" src="images/products/product-aftereffects.png" /&gt;&lt;/div&gt;
                  &lt;div class="item filter-adobe"&gt;&lt;img class="product" src="images/products/product-encore.png" /&gt;&lt;/div&gt;
                  &lt;div class="item filter-adobe"&gt;&lt;img class="product" src="images/products/product-indesign.png" /&gt;&lt;/div&gt;
                  &lt;div class="item filter-avid"&gt;&lt;img class="product" src="images/products/product-mediacomposer.png" /&gt;&lt;/div&gt;
                  &lt;div class="item filter-adobe"&gt;&lt;img class="product" src="images/products/product-photoshop.png" /&gt;&lt;/div&gt;
                  &lt;div class="item filter-adobe"&gt;&lt;img class="product" src="images/products/product-premierepro.png" /&gt;&lt;/div&gt;
                  &lt;div class="item filter-davinci"&gt;&lt;img class="product" src="images/products/product-resolve.png" /&gt;&lt;/div&gt;
                  &lt;div class="item filter-autodesk"&gt;&lt;img class="product" src="images/products/product-smoke.png" /&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="vendors-wrapper"&gt;
                  &lt;ul class="vendors"&gt;
                    &lt;li&gt;&lt;button class="btn btn-xs btn-primary product-button" id="button-apple"&gt;Apple&lt;/button&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;button class="btn btn-xs btn-primary product-button" id="button-adobe"&gt;Adobe&lt;/button&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;button class="btn btn-xs btn-primary product-button" id="button-avid"&gt;Avid&lt;/button&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;button class="btn btn-xs btn-primary product-button" id="button-davinci"&gt;Davinci&lt;/button&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;button class="btn btn-xs btn-primary product-button" id="button-autodesk"&gt;Autodesk&lt;/button&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;          
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>As you can see, I'm using a class on the item divs so I can filter them later. Here's the Javascript:</p>
  
  <pre><code>$(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;
    }
  });
  </code></pre>
  
  <p>This initiates the Slick slider, then listens for a click on the #button-apple. I'm using the built-in slickFilter method and then a bit of styling on the buttons to visually show that button has been selected. But as you've probably realised, creating a new Javascript function for every vendor is horribly inefficient. Is there a way for the function to know enough about what you've just clicked on for it to use the same function regardless of which one you clicked? Also, the method of setting the var filtered is also a bit flawed since clicking another vendor will (currently) just unfilter rather than unfilter then re-filter to that vendor - so the function ought to know whether the vendor button you've clicked on is already filtered and act on that.</p>
  
  <p>Supplementary question for anyone who knows slick - is there a way to centre all the items in the slider area when there are less than the number of slidesToShow?</p>
  
  <p><a href="http://jsfiddle.net/8vLs9qp6/" rel="nofollow">http://jsfiddle.net/8vLs9qp6/</a></p>