Question

首先：我不是JavaScript / JQuery！ ......但我会试着指出我想做什么。

我正在我的页面上使用梦幻般的bx滑块，我通过媒体查询使我的网站响应，这两个目前都很有效。 ...但是bx-slider-script中有一些功能，我不想在特定的浏览器宽度上激活。这就是我想要的：

浏览器宽度低于500px =加载此功能：

$('#slider4').bxSlider({
    minSlides: 2,
    maxSlides: 2,
    slideWidth: 230,
    slideMargin: 10,
    nextSelector: '#next',
    prevSelector: '#prev',
    infiniteLoop: false,
    hideControlOnEnd: true,
    pager: false,
    useCSS: false,
    easing: 'easeInOutExpo',
    speed: 1000
});

浏览器宽度高于500px =隐藏上面的函数并加载此函数：

$('#slider4').bxSlider({
    minSlides: 4,
    maxSlides: 4,
    slideWidth: 230,
    slideMargin: 20,
    nextSelector: '#next',
    prevSelector: '#prev',
    infiniteLoop: false,
    hideControlOnEnd: true,
    pager: false,
    useCSS: false,
    easing: 'easeInOutExpo',
    speed: 1000
});

...甚至可以在JavaScript中使用？我尝试了一些使用断点的脚本，但它认为我的JS知识很弱，无法按照我的意愿使用它。

如果有人在这里可以告诉我如何轻松地做到这一点会很棒！

Answer 1

If($(document).width() < 500){
...
}else{
...
}

http://api.jquery.com/width/

您可能还想加入onchange事件

$( window ).resize(function() {
 resizefunction();
});

http://api.jquery.com/resize/

响应式JavaScript - 加载/隐藏与浏览器宽度相关的特定功能？

1 个答案: