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

有任何想法吗？

更新：

找到这篇文章：如何在响应式设计中调用不同的 jquery 动作

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遇到断点事件时都有效的方法，那么两种方法之间没有差异，那就太好了。

Answer 1

查看Slick 文档的“事件”部分：

在 slick 1.4 中，回调方法已被弃用并替换为事件。
<...>
断点
参数：事件、光滑、断点。
在遇到断点后触发。

所以你需要采取两个步骤：

1. 使用该responsive选项设置您需要的断点。
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="https://via.placeholder.com/900x300/c69/f9c/?text=1" alt="">
  </div>
  <div>
    <img src="https://via.placeholder.com/900x300/9c6/cf9/?text=2" alt="">
  </div>
  <div>
    <img src="https://via.placeholder.com/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>