如何使用 AnythingSlider 在嵌套滑块上实现平滑过渡?
我正在尝试使用 AnythingSlider 创建嵌套滑块,但遇到了一个问题。展望未来,幻灯片过渡良好。然而,回过头来,一旦到达包含嵌套滑块的幻灯片,幻灯片就会笨拙地从右向左移动到位。
这是我遇到的示例: http://jsfiddle.net/S8Je5/118/ -- 相对于嵌套滑块滑动,向前和向后过渡之间存在明显差异。
非常感谢您的帮助。
I'm trying to create nested sliders using AnythingSlider, and I'm coming across an issue. Going forward, the slides transition fine. However, going back, once the slide containing the nested slider is reached, the slide shifts awkwardly from right to left into place.
Here is an example of what I'm experiencing: http://jsfiddle.net/S8Je5/118/ -- there is a clear difference between the forward and back transitions with respect to the nested slider slide.
Your help is much appreciated.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
啊,好的,所以它显示了嵌套滑块的第一个克隆面板的闪烁。我所要做的就是重新设计克隆面板内容的样式,以类似于第一个真正的嵌套幻灯片。 (我可以通过使用 Firebug 将外部滑块的位置设置为 0 来查看克隆面板的外观)。这是固定版本: http://jsfiddle.net/S8Je5/146/
Ah, ok, so it's showing a flash of the first cloned panel of the nested slider. What I had to do was restyle the cloned panel content to resemble the first real nested slide. (I was able to see how the cloned panel looked by setting the position of the outer slider to 0 using Firebug). Here is the fixed version: http://jsfiddle.net/S8Je5/146/
这仍然有一些怪癖并且有点古怪,但过渡看起来好多了。
第 1 步:将 #slider2 jquery 移至 #slider jquery 上方
第 2 步:
你的内部 ul (slider2)
以下是结果:http://jsfiddle.net/S8Je5/119/
奇怪的是,有时它似乎在内部滑块中显示空白图像。
在 Chrome 中,您可以通过在内部 ul 中放置一个带有 float: left 样式的 img 标签来解决这个问题
更新的示例: http: //jsfiddle.net/S8Je5/120/
这在 Chrome 中运行良好,不确定其他浏览器是否如此,但它是一个好的开始。
This still has a few quirks and is kind of hacky, but the transitions looks much better.
Step 1: Move the #slider2 jquery ABOVE the #slider jquery
Step 2:
<center>
your inner ul (slider2)Here is the result: http://jsfiddle.net/S8Je5/119/
The quirkiness is that sometimes it appears to display a blank image in the inside slider.
In Chrome, you can fix that by placing an img tag inside the inner ul with style float: left
Updated example: http://jsfiddle.net/S8Je5/120/
This works well in Chrome, not sure about other browsers, but its a good start.