滾動到jcarousel的第一項

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中的特定任意位置...

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。 查找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是基於0的 。

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