Zum ersten Element von jcarousel scrollen

Question

Ich habe mehrere Instanzen von jcarousel auf einer Seite innerhalb einer Schnittstelle mit Registerkarten. Ich muss in der Lage sein, zum ersten Element jedes Karussells zu blättern, wenn auf die entsprechende Registerkarte geklickt wird, und ich bin mir nicht sicher, wie das geht. Ich habe mir das Beispiel für statische Steuerelemente angeschaut (http://sorgalla.com/projects/jcarousel/examples/static_controls.html), kann aber nicht verstehen, wie dies für mehrere Karussells funktioniert.

Jede Hilfe wäre stark geschätzt. Meine Arbeit in progress ist hier: http://www.brainsdesign.com/client/Lab/14512/style.html

Vielen Dank,

Chris

Answer 1

können Sie so etwas wie verwenden:

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

Wo Position der Beginn Ihrer jcarousel oder dem Index du willst es schaffen.

Diese von der jquery.jcarousel.js Quelldatei ist:

/** 
    * 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

Hier ist die Lösung, gelang es ich

http://sorgalla.com/projects/jcarousel/examples/static_controls.html

Form zu arbeiten, haben eine Oberfläche mit Registerkarten wie:

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

Und jede Registerkarte enthält jcarousel Schieberegler.

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

Ich habe Ihre Website überprüft ... so denken, sollten Sie den Code von hier können.

Rufen Sie im jCarousel eine Funktion von initCallBack auf und lösen Sie die benutzerdefinierte Funktion aus, wenn Sie auf die Registerkarte klicken.

Das ist es.

Danke, Enayet

Answer 3

zu einer bestimmten beliebigen Position in jCarousel blättern ...

1. das jcarousel Instanz-Objekt übernehmen. Es ist in der jQuery .data() des Elements, das .jcarousel() aufgerufen wurde (Randnotiz: in Drupal Ansichten jcarousel Modul, das ist die ul.jcarousel)
2. Anruf .scroll() darauf.

In Code:

// 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); 

Wenn jemals wollen ein bestimmtes Element mit jQuery Selektoren sehen, dann, scroll to das Element (ein jCarousel durch das Element nicht durch die Position scrollen). Es ist einfach: Jedes jCarousel-Element hat ein Attribut, jcarouselindex. Schlagen Sie es mit var position = $('#some-element').attr('jcarouselindex'); nach.

Probe:

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

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

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

wo menuOption ist ein Anker <a> wie diese:

<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> 

Hinweis: es ist wichtig, weil scrollTo - 1index is 0 based zu verwenden.