I'm trying to launch an event when Slick.js breakpoint gets triggered.
The init event gets triggered even if the breakpoint is not hit.

Is there a way around it?

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

I also tried this but it didn't work:

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

Any ideas?

UPDATE:

Found this post: 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'));
    });
}

This workaround works, but would be nice if I found one that works whenever Slick.js breakpoint event is hit so there is no discrepancy between two methods.

I'm trying to launch an event when Slick.js breakpoint gets triggered.
The init event gets triggered even if the breakpoint is not hit.

Is there a way around it?

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

I also tried this but it didn't work:

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

Any ideas?

UPDATE:

Found this post: 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'));
    });
}

This workaround works, but would be nice if I found one that works whenever Slick.js breakpoint event is hit so there is no discrepancy between two methods.

• javascript
• html
• css
• slick.js

2 Answers 2

Look at the «Events» section of the Slick's documentation:

In slick 1.4, callback methods have been deprecated and replaced with events.
<...>
breakpoint
Arguments: event, slick, breakpoint.
Fires after a breakpoint is hit.

So you need to take two steps:

1. Set breakpoints that you need, using the responsive option.
2. Catch the breakpoint event and do whatever you want.

For example:

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./ajax/libs/slick-carousel/1.7.1/slick.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare./ajax/libs/slick-carousel/1.7.1/slick-theme.css">

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

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

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