拉斯维加斯滑块响应

Question

我得到了Vegas slider的麻烦，使其完全响应。 An example由框架的作者提供，但不显示如何将滑块应用于特定的div。

其实，我想把滑块放在一个div中，我会用@media控制高度。现在，它不会对窗口大小调整改变HEIGH（和它相同的，如果我用父母的div的唤起注意财产。

任何帮助的吗？谢谢

Answer 1

拉斯维加斯插件添加内嵌样式 - 高度设置为一个固定值 - 这将覆盖您的样式定义

尝试呼叫后，加入这vegas()：

$('.vegas-container').removeAttr('style'); 

---

但是，插件作者可能添加了内联样式，因此更安全的解决方案可能是更新内嵌样式的高度，而不是删除它。对于您可能会改为做：

$(window).resize(function() { 
    if ($('body').width() < 1000) 
    $('.vegas-container').height(200); 
    else 
    $('.vegas-container').height(400); 
}); 

这是假设你有类似<div class="vegasHere"></div>和一些CSS像

.vegasHere { 
    width: 100%; 
    height: 200px; 
} 
@media (min-width: 1000px) { 
    .vegasHere { 
    height: 400px; 
    } 
} 

Answer 2

我知道这是晚了，但可能是有用的人。 当我将手机肖像变为风景时，我正面临着这个问题。看起来像拉斯维加斯插件设置拉斯维加斯初始化的高度，这是固定的。当屏幕尺寸发生变化时，此高度并未更新。

我在调试器中看到拉斯加容器元素采取以下css应用。

element.style { 
    height: 688px; 
} 

这是重写我的CSS高度，我为我的conatiner。

my-container-css { 
    width: 100%; 
    height: 100vh; 
    min-height: 100%; 
    display: block; 
} 

高度被

element.style { 
     height: 688px; 
    } 

重写我做了我的高度很重要，它的工作。

my-container-css { 
    width: 100%; 
    height: 100vh !important; 
    min-height: 100%; 
    display: block; 
}