Прокрутите до первого элемента jcarousel

Question

У меня есть несколько экземпляров jcarousel на странице в интерфейсе с вкладками. Мне нужно иметь возможность прокручивать первый элемент каждой карусели, когда нажимается соответствующая вкладка, и я не уверен, как это сделать. Я посмотрел пример статических элементов управления (http://sorgalla.com/projects/jcarousel/examples/static_controls.html), но не могу понять, как это работает для нескольких каруселей.

Любая помощь будет очень оценен. Моя работа в прогресс здесь: http://www.brainsdesign.com/client/Lab/14512/style.html

Большое спасибо,

Chris

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

Вот решение, удалось его работать форма

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 и запускается пользовательская функция при нажатии на вкладку, перейдите в общий список прокрутки до позиции 1 для сброса!

Thats it.

Спасибо, Enayet

Answer 3

Для перехода к определенной произвольной позиции в jCarousel ...

1. Получить jcarousel экземпляр объекта. Он находится в jQuery .data() элемента, который был вызван. Jcarousel() (сторона примечания: в модуле jcarousel в Drupal), это 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 селекторы, то 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.