Lush Slider全宽度和限制高度

Question

Lush Slider全宽度和限制高度

javascriptjqueryhtmlcss

4

我相信我已经尝试了所有方法，但都失败了。我一直在使用lush响应式滑块，并遇到了一些主要问题。

首先，我复制了演示中的代码并将其放在我的头部，但它底部和右侧有奇怪的填充，所以我将其删除，并认为它工作得很好，除了高度之外。它太大了，占据了超过一半的页面。

当我调整窗口大小并重新加载页面时，滑块的背景会位于左上角，比实际需要的要小得多。因此，只有在100％屏幕下重新加载才能实现响应性？这没有任何意义。

此外，高度困扰着我。我根本无法调整它的大小，即使我在ul和li上放置了10em的静态高度，它也会重新调整大小，但是响应性就完全失效了。

我尝试在js fiddle中发布此内容，但插件的代码太多了，导致它在未运行任何内容的情况下崩溃。如果可以的话，我可以发布一个带有此内容的开发网站。正如我所说，我仅使用了演示文件中的确切HTML和CSS，只是减少了一些填充以使其全宽度。

非常感谢您的帮助。

- zazvorniki

这就是我一直在做的事情，但我无法加载。浏览器一直超时。我已将其发布在我的开发网站上，并将其放入主要问题中。 - zazvorniki

好的，两件事情。首先，看起来jquery正在为实际元素设置大小（添加style="height=##px"）。其次，请确保在css中设置UL和LI的大小。显然，内联样式会覆盖您的CSS，但当图像变为活动状态时，jquery会添加它。（我相信这就是正在发生的事情） - Jacques ジャック

哪个JS文件是与插件一起提供的？ - Jacques ジャック

所有的都在jquery.lush.min.js里面哈哈... 但我相信它在那个文件里。 - zazvorniki

哈哈，我一直在头文件里找它。 - Jacques ジャック

显示剩余4条评论

2个回答

-1

我的建议是不要使用JavaScript或JQuery。一些简单的CSS和HTML就足够了。

这是Fiddle示例：http://jsfiddle.net/jacobdubail/bKaxg/7/

显然，您不需要所有的CSS。只需要根据您的布局进行更改即可。

将宽度更改为百分比形式，例如：

min-width: 100%;

我建议将高度调整为em。

- Michelle Cantin

这实际上不会起作用。当我在处理这个问题时，这是我首先尝试的方法。当然，在任何情况下最好的做法是尝试使用CSS，但这比较复杂，因为jQuery正在操作高度和宽度。最终，我采取了非常复杂的修复措施来解决这个问题。 - zazvorniki

在CSS中设置高度。 - Michelle Cantin

是的，我明白你的意思，但是由Lush滑块设置的jQuery覆盖了它。这就是为什么你必须使用jQuery来解决这个问题。 - zazvorniki

我想说的是，不要使用JQUERY LUSH。只需删除您拥有的所有内容，并仅使用Html和CSS重新制作它。使用JQUERY LUSH会减慢页面速度，并且是一堆不必要的代码。 - Michelle Cantin

但这不是我的问题。我正在尝试使用lush插件。我的公司购买了它，我必须使用它。它根本不会使页面减速，它是一个非常快速的滑块。您有没有真正查看过它？这不仅仅是一个转到下一张图片的滑块... http://geedmo.com/?item=LushSlider - zazvorniki

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Y.K. · Accepted Answer

好的，我已经成功解决了宽度问题。问题似乎与初始基础宽度有关，该值默认为1140像素。尝试调整。

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

第一个lush slider div标签中的属性可能会让您取得一些进展，但似乎只接受固定值，不接受百分比。我选择了这个解决方案，它似乎有效，使用document.write方法编写第一个div标签并以编程方式将宽度设置为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>