title: Slick.js - Responsive breakpoint custom function
body: <p>I'm trying to launch an event when <code>Slick.js</code> breakpoint gets triggered.<br>
  The <code>init</code> event gets triggered even if the breakpoint is not hit.</p>
  
  <p>Is there a way around it? </p>
  
  <p>Here is my code:</p>
  
  <pre><code>var $j = jQuery.noConflict();
  
  $j(".homepage_slider").slick({
      dots: false,
      infinite: true,
      arrows:false,
      autoplay:true,
      autoplaySpeed:3500,
      slidesToShow: 1,
      slidesToScroll: 1,
      responsive: [                           
          {
            breakpoint: 480,
            settings: {
              init: changeImages()
            }
          }
      ]
  });
  
  function changeImages(){
      $j('img.slider-image').each(function() {
          $j(this).attr('src', $j(this).attr('data-mobile'));
      });                     
  }
  </code></pre>
  
  <p>I also tried this but it didn't work:</p>
  
  <pre><code>$j('.homepage_slider').on('breakpoint', function(){
      console.log("test");
      $j('img.slider-image').each(function() {
          $j(this).attr('src', $j(this).attr('data-mobile'));
      });
  });
  </code></pre>
  
  <p>Any ideas?</p>
  
  <p><strong>UPDATE</strong>:</p>
  
  <p>Found this post: <a href="https://stackoverflow.com/questions/11387391/">how to call different jquery actions in responsive design</a></p>
  
  <pre><code>var isBreakPoint = function (bp) {
      var bps = [320, 480, 768, 1024],
          w = $j(window).width(),
          min, max
      for (var i = 0, l = bps.length; i &lt; l; i++) {
          if (bps[i] === bp) {
              min = bps[i-1] || 0
              max = bps[i]
              break
          }
      }
      return w &gt; min &amp;&amp; w &lt;= max
  }
  
  if (isBreakPoint(480)) {
      $j('img.slider-image').each(function() {
          $j(this).attr('src', $j(this).attr('data-mobile'));
      });
  }
  </code></pre>
  
  <p>This workaround works, but would be nice if I found one that works whenever <code>Slick.js</code> breakpoint event is hit so there is no discrepancy between two methods.</p>