Di chuyển đến mục đầu tiên của jcarousel

Question

Tôi có nhiều phiên bản của jcarousel trên một trang trong giao diện tab. Tôi cần để có thể cuộn đến mục đầu tiên của mỗi băng chuyền khi tab có liên quan được nhấp và không chắc chắn cách thực hiện điều này. Tôi đã xem xét các ví dụ kiểm soát tĩnh (http://sorgalla.com/projects/jcarousel/examples/static_controls.html) nhưng không thể hiểu được làm thế nào để có được điều này làm việc cho nhiều carousels.

Bất kỳ trợ giúp nào sẽ là rất nhiều đánh giá cao. công việc theo tiến độ của tôi là ở đây: http://www.brainsdesign.com/client/Lab/14512/style.html

Rất cám ơn,

Chris

Answer 1

Bạn có thể sử dụng một cái gì đó như:

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

đâu vị trí là sự bắt đầu của jCarousel của bạn hoặc chỉ số bạn muốn đến.

Đây là từ tập tin jquery.jcarousel.js nguồn:

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

Dưới đây là giải pháp, quản lý nó hoạt động dưới hình thức

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

Tôi có một giao diện tab như:

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

Và mỗi tab chứa jcarousel thanh trượt.

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

Tôi đã kiểm tra trang web của bạn ... vì vậy hãy nghĩ bạn sẽ có thể lấy mã từ đây.

Trong jCarousel gọi hàm bằng initCallBack và kích hoạt chức năng tùy chỉnh khi tab được nhấp vào, hãy di chuyển chung đến vị trí 1 để đặt lại!

Thats it.

Cảm ơn, Enayet

Answer 3

Để di chuyển đến một vị trí tùy ý cụ thể trong jCarousel ...

1. Lấy đối tượng dụ jCarousel. Đó là trong jQuery .data() của phần tử .jcarousel() được gọi là (chú thích bên: trong mô-đun jcarousel xem Drupal, đó là ul.jcarousel)
2. Gọi .scroll() trên đó.

Trong mã:

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

Nếu bao giờ muốn tìm kiếm một yếu tố cụ thể sử dụng bộ chọn jQuery, sau đó, scroll to rằng yếu tố (di chuyển một jCarousel bởi yếu tố không phải do vị trí). Thật dễ dàng: mỗi phần tử jCarousel có thuộc tính, jcarouselindex. Tra cứu nó với var position = $('#some-element').attr('jcarouselindex');.

mẫu:

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

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

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

nơi menuOption là một neo <a> như thế này:

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

Lưu ý: điều quan trọng là phải sử dụng scrollTo - 1 vì index is 0 based.