Use jQuery function only in @media screen and (max-width: 960px)

4

We know that there are @media queries .

They work with CSS.

But I need to do with JavaScript.

I need bxSlider to work only on% w / o%.

    
asked by anonymous 18.03.2014 / 13:40

2 answers

3

So, guys, I did the following and solved my problem:

jQuery(document).ready(function() {
   if( $(window).width() <= 960){
     jQuery('.img-parceiros').bxSlider({
        nextSelector: '.seta-dir',
        prevSelector: '.seta-esq',
        nextText: '',
        prevText: '',
        auto: false,
        slideWidth: 200,
        minSlides: 2,
        maxSlides: 2,
        pager:false
     });
   }
});
    
18.03.2014 / 14:32
3

One way you can do this is by using window.matchMedia .

For example:

if (window.matchMedia('screen and (max-width: 960px)').matches){
  document.write('<script src="../js/bxSlider.js"></script>');
}

Remembering that I did not test, but in theory it should work.

Take a look at this link that should work for other browsers.

    
18.03.2014 / 14:09