Question

我相信我已经尝试过所有事情并且悲惨地失败了。我一直在使用郁郁葱葱的响应滑块，并且遇到了一些重大问题。

首先，我从演示中取出了确切的代码并将其放在我的标题中，但它在底部和右侧有一个奇怪的填充因此我将其删除并认为除了高度之外它工作正常。它太大了，占据了一半以上的页面。

当我调整窗口大小并重新加载页面时，滑块的背景位于左上角，比所需要的要小得多。因此，只有在100％屏幕重新加载时，响应能力才有效吗？这没有任何场景。

另外，高度让我烦恼。我根本无法调整大小，当我确实将静态高度放在10em的ul和li上时，它确实调整了大小，但随后响应性消失了。

我试图在js小提琴中发布这个，但插件是如此多的代码，它崩溃它没有运行任何东西。如果它有帮助我可以在其上发布一个开发站点。正如我所说，我使用了演示文件中的确切html和css，我只带了一点填充来使其全宽。

非常感谢任何帮助。

Answer 1

好的，我已经设法找到宽度问题的解决方案。该问题似乎与初始baseWidth有关，默认为1140像素。

玩弄

data-base-width="600" and data-base-height="600"

第一个郁金香滑块div标签中的

属性可能会看到您取得了一些进展，但看起来只接受固定值，没有百分比。我选择了这个似乎有用的解决方案，使用document.write方法编写第一个div标签，programmaticaly将宽度设置为clientWidth，如下：

<script>
document.write('<div id="lushDiv" class="lush-slider autoload shadow-a" data-slider-pause-on-hover="true" data-base-width="' + document.body.clientWidth + '" data-base-height="600" style="background: rgb(229, 229, 229)">');
</script>

Answer 2

我的建议是不要使用Javascript或JQuery。一些简单的CSS和HTML都可以。

这是小提琴：http://jsfiddle.net/jacobdubail/bKaxg/7/

你显然不需要所有的CSS。只需更改它以配合您的布局。

将宽度更改为百分比，如下所示：

min-width: 100%;

我建议将高度改为ems。

Lush Slider全宽和限制高度

2 个答案: