JQuery 滑块宽度，变量 <li>元素宽度 - 怎么办? [英] JQuery Slider width, variable <li> element widths - how do?
问题描述
免责声明 - 已阅读多个相关
Disclaimer - have read several related posts but they don't seem to have addressed my exact issue.
我的滑块面板包含一个无序列表，其中包含不同数量的不同宽度的 元素.每个 LI 包含一个图像，因此大小不同的原因.例如5 个元素 = 2000px，6 个元素 = 2100px
My slider panel contains an unordered list, with varying numbers of <li> elements of varying widths. Each LI contains an image, hence the reason for the different sizes. e.g. 5 elements = 2000px, 6 elements = 2100px
现在.如果我将滑块设置为 2500px 的固定宽度，则 li 元素会在滑块中正确显示.
Now. If I set the slider to have a fixed width of 2500px, the li elements display correctly in the slider.
然而，由于 li 的总宽度不同，滑块末端有不同数量的空白空间可供滚动，这会破坏效果.
However, because the li total width varies, there is a varying amount of blank space to scroll at the end of the slider which ruins the effect.
如果我不在 CSS 中指定 UL 的宽度，我的 LI 元素将正常浮动并wrap，而不是填充滑块的宽度(因为没有明确的宽度).
If I do not specify the width of the UL in the CSS, my LI elements will float normally and wrap, rather than filling the width of the slider (because there is no explicit width).
于是我想到了:
$('ul#slide-ul li').each(function(){
sliderWidth += $(this).outerWidth(); // LI's have padding
});
返回滑块内容的正确实际宽度.我可以使用这个值来设置滑块的宽度，一切正常 - 离线.
which returns the correct, actual width of the content of the slider. I can use this value to set the width of the slider, and everything works fine - offline.
在线，在FF、Chrome和IE中，第一次加载页面时，LI的显示好像没有设置宽度.然后我刷新页面，一切正常.
Online, in FF, Chrome and IE, the first time the page loads, the LI's display as if there was no width set. I then refresh the page, and everything is ok.
我认为发生这种情况是因为此时 LI 中的图像尚未缓存或加载，并且没有预先确定的宽度，因此 LI 不是它们的 真实 大小.
I think this happens because the images inside the LI's haven't been cached or loaded at this point, and there is no pre-determined width so the LI's aren't their true size.
是否有更好的方法来获取具有不同内容的 UL 的宽度，以便在滑块中使用，并防止页面加载/刷新出现此问题.
Is there a better way of getting the width of an UL that has varying content, for use within a slider, and preventing this issue with the page loading/refresh.
对于冗长且难以关注的帖子，我深表歉意，但我无法发布实时链接.如果有帮助，我会做一个 js fiddle，但不幸的是代码很多.
Sorry for the lengthy, hard to follow post, but am unable to post a live link. I will do a js fiddle if it will help, but there's a lot of code unfortunately.
谢谢.
这里或多或少是一个 JSFiddle.如果没有实时服务器，恐怕很难复制.
Here's a JSFiddle more or less. It's quite hard to replicate I'm afraid without a live server.
推荐答案
在你的 JSFiddle 中，宽度已经定义在所有 img 元素上，你不能把宽度也放在 li 元素上吗?
In your JSFiddle the width is already defined on all the img elements, can't you put the width on the li elements as well?
如果你想要动态的，也许你可以这样做:给图像一个名为imgClass"的类
If you want that dynamically, maybe you could do something like: give the images a class called 'imgClass'
$('ul#slide-ul li').each(function(){
$(this).width($('.imgClass', this).width());
这篇关于JQuery 滑块宽度，变量 <li>元素宽度 - 怎么办?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
