Desplácese hasta el primer elemento de jcarousel

Question

Tengo varias instancias de jcarousel en una página dentro de una interfaz con pestañas. Necesito poder desplazarme al primer elemento de cada carrusel cuando se hace clic en la pestaña correspondiente y no estoy seguro de cómo hacerlo. He observado el ejemplo de controles estáticos (http://sorgalla.com/projects/jcarousel/examples/static_controls.html) pero no puedo entender cómo hacerlo funcionar para múltiples carruseles.

Cualquier ayuda sería enormemente apreciado. Mi trabajo en progreso está aquí: http://www.brainsdesign.com/client/Lab/14512/style.html

Muchas gracias,

Chris

Answer 1

Usted puede usar algo como:

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

donde la posición es el comienzo de su jCarousel o el índice quieres llegar a.

Esto es desde el archivo de origen 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

Aquí está la solución, logró que funcione forma

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

tengo una interfaz con pestañas como:

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

Y cada pestaña contiene jcarousel control deslizante.

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

He revisado su sitio ... por lo que creo que debería poder obtener el código aquí.

En jCarousel invoque una función mediante initCallBack y active la función personalizada cuando se hace clic en la pestaña, vaya al desplazamiento general a la posición 1 para restablecerla.

Eso es todo.

Gracias, Enayet

Answer 3

para desplazarse a una posición arbitraria específico en jCarousel ...

1. obtener el objeto instancia jCarousel. Está en jQuery .data() del elemento al que se llamó .jcarousel() (nota al margen: en el módulo jcarousel de vistas de Drupal, ul.jcarousel)
2. Llama al .scroll() en él.

En código:

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

Si alguna vez desee buscar un elemento específico usando selectores de jQuery, entonces, scroll to ese elemento (desplazamiento de un elemento por jCarousel no por la posición). Es fácil: cada elemento de jCarousel tiene un atributo, jcarouselindex. Búscalo con var position = $('#some-element').attr('jcarouselindex');.

muestra:

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

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

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

donde menuOption es un ancla <a> como éste:

<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: es importante utilizar scrollTo - 1 porque index is 0 based.