jQuery Carousel幻灯片导航到特定点

Question

我创建了一个使用jQuery和溢出隐藏的幻灯片旋转木马，您可以通过在左边距值中添加或减去滑动宽度来来回导航。

http://trainingstage.ntistudio.co.uk/slideshows/2/presentation

http://pastebin.com/nYQiEfqB

我现在希望能够将幻灯片分类到相关部分，然后导航到每个部分的开头，但我不确定如何执行此操作。主要问题是内容将是动态的（使用rails构建），因此每个幻灯片中的硬编码值都不是一种选择。

任何人都可以给我一些关于jQuery的起点的指示，以便我可以塑造rails后端吗？我解构的一个类似的工作项目也可能很好。

关于此事的任何提示或提示都非常受欢迎。谢谢

Answer 1

• 为部分第一页上的元素提供唯一ID。

• 使用jQuery查找该元素的offset（） http://api.jquery.com/offset/

• 计算该元素存在的幻灯片。 粗糙算法： current_slide = Math.ceil（$（'example'）。offset（）。left / slide_width）;

注意：您需要始终对上述操作的结果进行舍入，因为您要将节目的第一张幻灯片初始化为1.

缺点：我不知道offset（）是否会根据幻灯片的完整文档或单个幻灯片实际报告元素。

这个解决方案很混乱，甚至可能无法正常工作，但也许其中的想法对您有用。

Answer 2

使用标识符对每个元素进行分类。例如，猫类，将类“猫”添加到每个项目。让我们说你有狗跟猫，你想去狗。

var slideAmount = $('.cats').length * 500 //500 being your viewport width
$('.carouselParent').animate({'left' : -slideAmount});

这是非常基本的逻辑位，我想你会看到我得到的东西？

Answer 3

在查看了您的网站目标后，我刚刚看到了完美 jQuery滑块，以满足您的要求。

jQuery Local Scroll 可轻松处理AJAX内容，并允许在主要部分中使用子部分。

jQuery AJAX Local Scroll v1.2.7： Webpage AJAX Demo，主页为HERE。

编辑：如果滚动条是在页面加载时动态创建的，那么请查看它们的正常non-AJAX version，其中显示了不同的剖面和子部分的导航技术。

EDIT2：至于使用jQuery导航到不同元素和从不同元素导航，这个插件也可以使用jQuery选择器滚动到任何元素。