JS Media Query

[iknowdavehouse]

Although my CSS is getting better I just simply do not understand javascript yet.

I am using a slider on a simple (one break point) responsive micro site.

All I want to do is add a variable on the js running the slider so

Desktop

$(function () {

$(“.rslides”).responsiveSlides({
auto: true,
pager: true,
nav: false,
speed: 1000,

});

});

And then at the first breakpoint I just want to swap the pager and nav round:

$(function () {

$(“.rslides”).responsiveSlides({
auto: true,
pager: false,
nav: true,
speed: 1000,

});

});

So how do add a media query to this script so that I can swap between these two options?

Thanks

[CrocoDillon]

You can use something like this:

$(function () {
var isDesktop = $(window).width() > 1024;

$(“.rslides”).responsiveSlides({
auto: true,
pager: isDesktop,
nav: !isDesktop,
speed: 1000,
});

});

But to make it support resizing depends on the plugin options (easiest would be to re-run the initialization, you could try if that works).

[iknowdavehouse]

thanks, this was a perfect solution for this particular site. A real help, thank you!

[Author]

Posts