Slick.js - 応答ブレークポイントカスタム機能

Question

Slick.jsブレークポイントが発生したときにイベントを起動しようとしています。
initイベントは、ブレークポイントがヒットしなかった場合でもトリガされます。

周囲に道がありますか？ここで

は私のコードです：私もこれを試してみました

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')); 
    });      
} 

が、それはうまくいきませんでした：

$j('.homepage_slider').on('breakpoint', function(){ 
    console.log("test"); 
    $j('img.slider-image').each(function() { 
     $j(this).attr('src', $j(this).attr('data-mobile')); 
    }); 
}); 

任意のアイデア？

UPDATE：how to call different jquery actions in responsive design

var isBreakPoint = function (bp) { 
    var bps = [320, 480, 768, 1024], 
     w = $j(window).width(), 
     min, max 
    for (var i = 0, l = bps.length; i < l; i++) { 
     if (bps[i] === bp) { 
      min = bps[i-1] || 0 
      max = bps[i] 
      break 
     } 
    } 
    return w > min && w <= max 
} 

if (isBreakPoint(480)) { 
    $j('img.slider-image').each(function() { 
     $j(this).attr('src', $j(this).attr('data-mobile')); 
    }); 
} 

この回避策は動作しますが、私は間に矛盾がないようSlick.jsブレークポイントイベントがヒットするたびに動作するものを発見した場合はいいだろう：この記事が見つかりました

2つの方法。

Answer 1

ルック で«イベント»   Slick's documentationのセクション：滑らかな1.4で

は、コールバックメソッドは非推奨とイベントに置き換えられました。
< ...>
ブレークポイント
引数：イベント、滑らかな、ブレークポイントを設定します。
ブレークポイントがヒットした後に発生します。 responsiveオプションを使用して、あなたが必要

1. ブレークポイントの設定：

は、だから、2つのステップを取る必要があります。

breakpointイベントをキャッチして、何でもしてください。

var $myCarousel = $('#myCarousel'); 
 

 
/* Step 1 */ 
 
$myCarousel.slick({ 
 
    autoplay: true, 
 
    dots: true, 
 
    responsive: [ 
 
    { breakpoint: 500 }, 
 
    { breakpoint: 768 }, 
 
    { breakpoint: 992 } 
 
    ] 
 
}); 
 

 
/* Step 2 */ 
 
$myCarousel.on('breakpoint', function(event, slick, breakpoint) { 
 
    console.log('breakpoint ' + breakpoint); 
 
});

/* Decorations */ 
 
.my-carousel img { 
 
    width: 100%; 
 
} 
 
.my-carousel .slick-next { 
 
    right: 15px; 
 
} 
 
.my-carousel .slick-prev { 
 
    left: 15px; 
 
    z-index: 1; 
 
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.7.1/slick.min.css"> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.7.1/slick-theme.css"> 
 

 
<div id="myCarousel" class="my-carousel"> 
 
    <div> 
 
    <img src="//placehold.it/900x300/c69/f9c/?text=1" alt=""> 
 
    </div> 
 
    <div> 
 
    <img src="//placehold.it/900x300/9c6/cf9/?text=2" alt=""> 
 
    </div> 
 
    <div> 
 
    <img src="//placehold.it/900x300/69c/9cf/?text=3" alt=""> 
 
    </div> 
 
</div> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.7.1/slick.min.js"></script>

例えば：