How to use the different image by PC and mobile?

[sutara79]

Hi,
I want to use the different image by PC and mobile.
I made a example like following.
Is this a right way?
Are there suitable ways or options?
Thanks.

---

http://runnable.com/VVFeVAp77bh6VUBr/how-to-use-the-different-image-by-pc-and-mobile-on-jquery-bxslider-js

JavaScript

function changeSlider() {
    if (window.innerWidth < 800) {
        $('.bx-wrapper:has(#slider-pc)').hide();
        $('.bx-wrapper:has(#slider-mobile)').show();
    } else {
        $('.bx-wrapper:has(#slider-pc)').show();
        $('.bx-wrapper:has(#slider-mobile)').hide();
    }
}
window.onload = function () {
    var slider = $('.bxslider').bxSlider({
        onSliderLoad: changeSlider,
        onSliderResize: changeSlider
    });
};

[Tidal-Wave]

Overall this is an ok way to do this, but Its bad practice to use id's more than once on a page, so if you have multiple #slider-pc or #slider-mobile that's semantically bad. It would be best to use classes.

There is no built in method to do this in bxSlider. There are several ways to achieve this and no real 'wrong' answer, just be sure to consider best practices and efficiency.

[sutara79]

Oh, thank you.
I understand.