Question

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

任何帮助都会非常赞赏。我的工作进展如下：http://www.brainsdesign.com/client/Lab/14512/style.html

非常感谢，

克里斯

Answer 1

您可以使用以下内容：

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);
    },

Answer 2

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

获取jcarousel实例对象。它在调用.jcarousel（）的元素的jQuery .data（）中（旁注：在Drupal视图jcarousel模块中，那是ul.jcarousel）
点击.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选择器查找特定元素，那么，scroll to该元素（按元素滚动jCarousel而不是按位置）。这很简单：每个jCarousel元素都有一个属性jcarouselindex。请使用var position = $('#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是一个锚点<a>，如下所示：

<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因为index is 0 based非常重要。

Answer 3

以下是解决方案，将其设置为工作表单

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调用一个函数并在单击选项卡时触发自定义函数do do general scroll to position 1 to reset！

多数民众赞成。

谢谢， Enayet

滚动到jcarousel的第一项

3 个答案: