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

有什么想法吗？

更新：

发现这篇文章：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断点事件被命中时有效的方法会很好，所以两种方法之间没有差异。

Answer 1

查看Slick's documentation的<活动»部分：

在光滑的1.4中，不推荐使用回调方法并将其替换为事件   ＆LT; ...＆GT;
  的断点
  参数：事件，光滑，断点   在断点被击中后开火。

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

使用responsive选项设置所需的断点。

抓住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>

Answer 2

const $slick = $(".health-slick .items");
const $slick_item = $(".health-slick .items .item");

// INIT
  slickInit();
  animateHoverItem();

// FUNCTIONS
  function animateHoverItem() {
    $slick_item.mouseover(function() {
        $(this).addClass('animate');
    });
    $slick_item.mouseout(function() {
        $(this).removeClass('animate');
    });
    console.log(0); // this will call 1 time and 1 time when breakpoint window change
  }

  function slickInit() {
    $(document).ready(function () {
      $slick.slick({
        slidesToShow: 5,
        slidesToScroll: 1
        responsive: [
          {
            breakpoint: 767.98,
            settings: {
              slidesToShow: 2,
            },
          },
          {
            breakpoint: 575.98,
            settings: {
              slidesToShow: 1,
            },
          }
        ],
      });

      $slick.on('breakpoint', function(e){
        animateHoverItem();
      });
      
    });
  }

Slick.js - 响应断点自定义功能

2 个答案: