滚动到 jcarousel 的第一项

Question

我在选项卡式界面的页面上有多个 jcarousel 实例。单击相关选项卡时，我需要能够滚动到每个轮播的第一项，但不确定如何执行此操作。我查看了静态控件示例（http://sorgalla.com/projects/jcarousel /examples/static_controls.html），但无法理解如何使其适用于多个轮播。

任何帮助将非常感激。我正在进行的工作在这里： http://www.brainsdesign.com/ client/Lab/14512/style.html

非常感谢，

克里斯

Answer 1

要滚动到 jCarousel 中的特定任意位置...

1. 获取 jcarousel 实例对象。它位于调用 .jcarousel() 的元素的 jQuery .data() 中（旁注：在 Drupal 视图 jcarousel 模块中，即 ul.jcarousel）
2. 调用 .scroll() 就可以了。

在代码中：

// Create it
$('.posts').jcarousel( someSettings );

// Get it
var jcarousel = $('.posts').data( 'jcarousel' );

// Scroll it
var scrollTo = 1;
var animateScrolling = true;

jcarousel.scroll( scrollTo - 1, animateScrolling );

如果想使用 jQuery 选择器查找特定元素，则 滚动到该元素（按元素而不是位置滚动 jCarousel）。这很简单：每个 jCarousel 元素都有一个属性 jcarouselindex。使用 varposition = $('#some-element').attr('jcarouselindex'); 查找它。

示例：

// Get jcarousel
var jcarousel = $('#menu').data('jcarousel');

var scrollTo = menuOption.parent().attr("jcarouselindex");
var animateScrolling = true;

// Scroll it
jcarousel.scroll(scrollTo - 1, animateScrolling);

其中 menuOption 是一个锚点 ，如下所示：

<li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-8 jcarousel-item-8-horizontal" style="float: left; list-style: none outside none;" jcarouselindex="8">
<a title="Educação de Pacientes e Familiares" data-chapterid="16" data-acronym="PFE" href="">
</li>

注意：使用 scrollTo - 1 非常重要，因为 索引从 0 开始。

Answer 2

这是解决方案，管理它以

http://sorgalla.com/projects/jcarousel 的形式工作/examples/static_controls.html

我有一个选项卡式界面，例如：

<div class="navTabs">
<ul class="tabs">
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
</ul>
</div>

每个选项卡都包含 jcarousel 滑块。

jQuery(document).ready(
function($)
{

    jQuery('.posts').jcarousel({
        scroll: 4,
        visible:4,
        //this.scroll(1, 0);
        initCallback: mycarousel_initCallback
    });
});

function mycarousel_initCallback(carousel) {
    jQuery('.navTabs a').bind('click', function() {
        carousel.scroll(1,0);
        //return false;
    });
};

我已经检查了您的网站...所以认为您应该能够从这里获取代码。

在 jCarousel 中，通过 initCallBack 调用函数，并在单击选项卡时触发自定义函数，一般滚动到位置 1 进行重置！

就是这样。

谢谢，
埃纳耶特

Answer 3

您可以使用类似的内容：

jQuery('#myCarousel')
     .jcarousel('scroll',position); 

其中位置是 jcarousel 的开始位置或您想要到达的索引。

这是来自 jquery.jcarousel.js 源文件：

 /**
     * Scrolls the carousel to a certain position.
     *
     * @method scroll
     * @return undefined
     * @param i {Number} The index of the element to scoll to.
     * @param a {Boolean} Flag indicating whether to perform animation.
     */
    scroll: function(i, a) {
        if (this.locked || this.animating) {
            return;
        }

        this.pauseAuto();
        this.animate(this.pos(i), a);
    },