滑动滑块更改bg图像

Question

我有下面的代码：
我使用滑动滑块来创建滑块与背景图像，而不是使用img标记。我的滑块高度是700px，最小高度是400px。 随着jQuery代码下面我想改变背景图像取决于窗口的宽度，但问题是，代码只改变第一个滑块的图像。任何帮助？ :)谢谢

<div class="hero-slider-wraper"> 
<div class="hero-slider"> 
    <div class="hero-slider-component"> 
    <div class="hero-slider-image" data-img-mobile="http://website.com/wp-content/uploads/2017/01/home1-small.jpg" data-img-large="http://website.com/wp-content/uploads/2017/01/home1.jpg" ></div> 
    <div class="hero-slider-image" data-img-mobile="http://website.com/wp-content/uploads/2017/01/home2-small.jpg" data-img-large="http://website.com/wp-content/uploads/2017/01/home2.jpg"></div> 
    <div class="hero-slider-image" data-img-mobile="http://website.com/wp-content/uploads/2017/01/home3-small.jpg" data-img-large="http://website.com/wp-content/uploads/2017/01/home3.jpg"></div> 
    </div> 
</div> 
</div> 

function resizeSlick() { 
    var desktopImage = $('.slick-current').attr("data-img-large"); 
    var mobileImage = $('.slick-current').attr("data-img-mobile"); 

if($(window).width() < 768) 
{ 
     $('.slick-current').css('background-image', 'url("'+ mobileImage +'")'); 
} 
else 
{ 
     $('.slick-current').css('background-image', 'url("'+ desktopImage +'")'); 
} 
} 

    //initialize 
    resizeSlick(); 

    //call when the page resizes. 
    $(window).resize(function() { 
     resizeSlick(); 
    }); 

Answer 1

你需要运行的每个图像的代码，而不仅仅是.slick-current

function resizeSlick() { 
    var windowWidth = $(window).width(); 

    $('.hero-slider-image').each(function() { 
    var desktopImage = $('.slick-current').attr("data-img-large"), 
     mobileImage = $('.slick-current').attr("data-img-mobile"); 

    if (windowWidth < 768) { 
     $(this).css('background-image', 'url("' + mobileImage + '")'); 
    } else { 
     $(this).css('background-image', 'url("' + desktopImage + '")'); 
    } 

    }); 
} 

//initialize 
resizeSlick(); 

//call when the page resizes. 
$(window).resize(resizeSlick);