Cycle jQuery插件,图片可以直观地双向滑动吗?

发布于 2024-09-14 23:41:07 字数 674 浏览 7 评论 0原文

我正在使用在这里找到的 jQuery 循环插件: http://jquery.malsup.com/cycle/

效果很好。我的客户想要一个包含图像和文本等的

列表在首页上水平滑动。但她还希望我使用上一个和下一个选项在两侧都有可以控制滑动面板的箭头。

这是我正在使用的 jQuery 插件调用:

$('#slidingpanelscontent').cycle({ 
    fx: 'scrollLeft',
    next: "#sliding_next",
    prev: "#sliding_prev",
    timeout: 6000,
    speed: 800
});

它在大多数情况下都有效。当您单击向右箭头 (#sliding_next) 时,当前面板会向左滚动以显示下一个面板。但是,当您单击向左箭头 (#sliding_prev) 时,当前面板仍会向左滚动以显示上一个图像。

换句话说,显示了正确的图像,但动画是违反直觉的,并且会导致用户相信正在显示下一个面板,而不是返回到上一个面板。

有人知道使用这个插件克服这个问题的方法吗?

I'm using the jQuery cycle plugin found here: http://jquery.malsup.com/cycle/

It works well. My client wants a list of <div>s that contain images and text, etc. to slide horizontally on the front page. But she also wants me to use the previous and next options to have arrows on either side that can control the sliding panels.

Here is the jQuery plugin call I'm using:

$('#slidingpanelscontent').cycle({ 
    fx: 'scrollLeft',
    next: "#sliding_next",
    prev: "#sliding_prev",
    timeout: 6000,
    speed: 800
});

It works for the most part. When you click the right arrow (#sliding_next), the current panel scrolls off to the left to reveal the next panel. However, when you click the left pointing arrow (#sliding_prev), the current panel still scrolls off to the left to reveal the previous image.

In other words, the correct image is displayed, but the animation is counter-intuitive and would lead a user to believe that the NEXT panel is being displayed, rather than moving back to the previous panel.

Anyone know a way of overcoming this using this plugin?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

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

发布评论

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

评论(2

日记撕了你也走了 2024-09-21 23:41:07

使用 fx: 'scrollHorz' 而不是 fx: 'scrollLeft'。
这样,动画就会在两侧起作用。
希望这有帮助:)

Use fx: 'scrollHorz' instead of fx: 'scrollLeft'.
This way, the animation will work both side.
Hope this help :)

伪心 2024-09-21 23:41:07

我不确定循环插件是否可以完成此任务,但我最近查看了一个可以实现您想要的功能的教程。它被称为“无限轮播”。

有关详细信息,请参阅此无限轮播教程

编辑:您是否看过这个演示,它似乎具有您所描述的功能?
http://jquery.malsup.com/cycle/add6.html

I'm not sure if the cycle plugin can accomplish this but I recently viewed a tutorial that does what you want. It's called an "infinite carousel".

See this infinite carousel tutorial for details.

Edit: Have you seen this demo which appears to have the functionality you described?
http://jquery.malsup.com/cycle/add6.html

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