JavaScript Media Query с прослушивателем событий

Question

, поэтому я пытаюсь выполнить обмен между рабочим слайдером (карусель), который отображается на чем-либо размером больше 715 пикселей. Под 715px вместо слайдера будет отображаться SVG-файл.

У меня есть возможность отображения изображения на < 715px, а ползунок -> 715px, но я не могу заставить их обмениваться между одним и другим при изменении размера окна браузера.

Мне нужен прослушиватель событий для этого? Спасибо.

$(function() { 
    var mobileIMG = 'img/BSW-mobile.svg' 

    // checks if window is less than 715px, if so, displays mobileIMG 
    if (window.matchMedia("(max-width: 715px)").matches) { 
    $('#slideshow').attr('src', mobileIMG); 
    } else { // otherwise, runs carousel 
    var imgs = ['img/slide1.jpg', 'img/slide2.jpg', 'img/slide3.jpg']; 
    var i = 1; 

    function changeSlide() { 
     console.log('hello world'); 
     $('#slideshow').attr('src', imgs[i]); 
     i++; 
     if (i === 3) { i = 0; } 
    } 
    setInterval(changeSlide, 3000); 
    } 
}); 

Answer 1

Добавить прослушиватель событий для события изменения размера окна. И эта функция понадобится снова запустить, когда это произойдет.

После этого вам нужно будет немного поработать, например, убедитесь, что ваш setInterval не устанавливается снова и снова, и продолжайте стрелять по каждому пикселю изменения размера.

Я также обычно добавляю задержку около секунды, чтобы перерисовать только после остановки изменения размера. Потому что он будет срабатывать снова и снова при изменении размера окна.