JQuery 滑块宽度，变量
免责声明 - 已阅读几篇相关内容帖子但他们似乎没有解决我的确切问题。
问题
我的 滑块面板包含一个无序列表，其中包含不同数量、不同宽度的
现在。如果我将滑块设置为固定宽度 2500px，则 li 元素会在滑块中正确显示。
但是，由于 li 总宽度有所不同，因此滑块末尾有不同数量的空白空间可供滚动，这会破坏效果。
如果我没有在CSS中指定UL的宽度，我的LI元素将正常浮动并换行，而不是填充滑块的宽度（因为没有显式宽度）。
我尝试了什么
所以我想到了：
$('ul#slide-ul li').each(function(){
sliderWidth += $(this).outerWidth(); // LI's have padding
});
它返回滑块内容的正确的实际宽度。我可以使用这个值来设置滑块的宽度，并且一切正常 - 离线。
在线，在FF、Chrome和IE中，第一次加载页面时，LI的显示就像没有设置宽度一样。然后我刷新页面，一切正常。
我认为发生这种情况是因为 LI 内的图像此时尚未缓存或加载，并且没有预先确定的宽度，因此 LI 不是其真实大小。
总结
有没有更好的方法来获取具有不同内容的 UL 的宽度，以便在滑块中使用，并防止页面加载/刷新时出现此问题。
很抱歉这篇冗长且难以理解的帖子，但我无法发布实时链接。如果有帮助的话我会做一个 js 小提琴，但不幸的是有很多代码。
谢谢。
编辑
这里或多或少有一个JSFiddle。如果没有实时服务器，恐怕很难复制。
Disclaimer - have read several related posts but they don't seem to have addressed my exact issue.
The problem
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
Now. If I set the slider to have a fixed width of 2500px, the li elements display correctly in the slider.
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.
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).
What I tried
So I came up with the idea of:
$('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.
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.
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.
Summary
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.
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.
Thank you.
Edit
Here's a JSFiddle more or less. It's quite hard to replicate I'm afraid without a live server.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
在你的 JSFiddle 中，所有 img 元素的宽度都已经定义了，你不能也把宽度放在 li 元素上吗？
如果你想要动态地实现这一点，也许你可以这样做：
为图像指定一个名为“imgClass”的类
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?
If you want that dynamically, maybe you could do something like:
give the images a class called 'imgClass'
查看
white-space: nowrap;Look into
white-space: nowrap;建立在空白答案的基础上，因为我认为一种解决方案是强制所有图像显示在一行上（这样你就可以得到 ul 宽度），你可以使用
inline-blocks< a href="http://jsfiddle.net/clairesuzy/K7qKT/" rel="nofollow">这是一个分叉的小提琴
我还没有接触过 JS，但它会< /strong> 需要更改，因为您不再需要计算
slide-ul的宽度，您可以使用.carousel-container和# 的宽度Slide-ulwidth 我懒得去修改所有计算以使用
display: inline-block重建滚动条并告诉它们之间的空白不要换行< /code>，将强制#slide-ul始终足够宽以包含所有图像，并且因为将其
overflow设置为hidden它是裁剪>ul（现在不是 ul ;)），据我所知，它的宽度与.carousel-container相同，所以你有你需要的数字？我认为将图像全部放在一行上是这里的问题吗？
Building on the white-space answer because I think one solution is to force all your images to display on one line (so you get the ul width) this you can do using
inline-blockshere's a forked fiddle
I haven't touched the JS, but it will need changed as you will no longer need to calculate the width of the
slide-ulyou can use the width of the.carousel-containerand#slide-ulwidth I was too lazy to go in and amend all the calculations to rebuild the scrollerusing
display: inline-blockand telling thewhitespace between them not to wrap, will force#slide-ulto always be wide enough to contain all the images and because<div style="overflow: hidden;" class="scroll-pane ui-widget ui-corner-all">has it's
overflowset tohiddenit's the one that is cropping theul(which is now not a ul ;)), and it, as far as I can see, is the same width as.carousel-containerso you have the figures you need?I think that getting the images all on one line is the issue here?