如何使用 AnythingSlider 在嵌套滑块上实现平滑过渡?

发布于 2024-11-10 12:09:17 字数 256 浏览 0 评论 0原文

我正在尝试使用 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

℡Ms空城旧梦 2024-11-17 12:09:17

啊,好的,所以它显示了嵌套滑块的第一个克隆面板的闪烁。我所要做的就是重新设计克隆面板内容的样式,以类似于第一个真正的嵌套幻灯片。 (我可以通过使用 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/

怀念你的温柔 2024-11-17 12:09:17

这仍然有一些怪癖并且有点古怪,但过渡看起来好多了。

第 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.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文