Scorrere fino al primo elemento di jcarousel

Question

Ho più istanze di jcarousel in una pagina all'interno di un'interfaccia a schede. Devo essere in grado di scorrere fino al primo elemento di ciascun carosello quando si fa clic sulla relativa scheda e non sono sicuro su come farlo. Ho esaminato l'esempio dei controlli statici (http://sorgalla.com/projects/jcarousel/examples/static_controls.html) ma non riesco a capire come farlo funzionare per più caroselli.

Qualsiasi aiuto sarebbe molto apprezzato. Il mio lavoro in corso è qui: http://www.brainsdesign.com/client/Lab/14512/style.html

Molte grazie,

Chris

Answer 1

Si può usare qualcosa di simile a:

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

dove la posizione è l'inizio del vostro jCarousel o l'indice vuoi arrivare.

Questo è dal file jquery.jcarousel.js fonte:

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

Ecco la soluzione, è riuscito a farlo funzionare forma

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

ho un'interfaccia a schede come:

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

E ogni scheda contiene jcarousel slider.

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

Ho controllato il tuo sito ... quindi penso che dovresti essere in grado di ottenere il codice da qui.

Nella chiamata jCarousel una funzione di initCallBack e attivare la funzione personalizzata quando si fa clic sulla scheda, fare scorrere la posizione generale verso la posizione 1 per ripristinare!

Questo è tutto.

Grazie, Enayet

Answer 3

per scorrere fino a una posizione arbitraria specifica jCarousel ...

1. ottenere l'oggetto dell'istanza jCarousel. Si trova in jQuery .data() dell'elemento su cui è stato chiamato .jcarousel(). Nota: in Drupal viene visualizzato il modulo jcarousel, ovvero ul.jcarousel
2. Chiama il numero .scroll().

in codice:

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

Se mai voglia di cercare un elemento specifico utilizzando selettori di jQuery, quindi, scroll to quell'elemento (lo scorrimento di un jCarousel per elemento non dalla posizione). È semplice: ogni elemento jCarousel ha un attributo, jcarouselindex. Cercare con var position = $('#some-element').attr('jcarouselindex');.

Esempio:

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

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

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

dove menuOption è un'ancora <a> come questo:

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

Nota: è importante utilizzare scrollTo - 1 perché index is 0 based.