如何让Vegas滑块完全响应

Posted 2021-04-12

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

实际上，我想将滑块放在div中，我将使用height控制@media。现在，它不会在窗口调整大小时更改height（如果我使用父级div的height属性，它也会这样做。

答案

Vegas插件正在添加内联样式 - 将高度设置为固定值 - 这将覆盖样式表定义。

尝试在调用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;
  }
}

另一答案

我知道它已经晚了，但可能对其他人有用。当我将手机肖像转为风景时，我遇到了这个问题。看起来像拉斯维加斯插件设置维加斯初始化的高度，这是固定的。屏幕尺寸更改时，此高度未更新。

我在调试器中看到vegas-container元素需要应用以下css。

element.style {
    height: 688px;
}

它覆盖了我的容器上的css高度。

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;
}