Scroll to first item of jcarousel

Question

I have multiple instances of jcarousel on a page within a tabbed interface. I need to be able to scroll to the first item of each carousel when the relevant tab is clicked and am unsure how to do this. I've looked at the static controls example ( http://sorgalla.com/projects/jcarousel/examples/static_controls.html ) but cannot fathom how to get this working for multiple carousels.

Any help would be greatly appreciated. My work-in-progress is here: http://www.brainsdesign.com/client/Lab/14512/style.html

Many thanks,

Chris

Answer 1

You can use something like:

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

Where position is the start of your jcarousel or the index you want to get to.

This is from the jquery.jcarousel.js source file:

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

To scroll to a specific arbitrary position in jCarousel...

1. Get the jcarousel instance object. It's in the jQuery .data() of the element that .jcarousel() was called on (side note: in Drupal views jcarousel module, that's the ul.jcarousel )
2. Call .scroll() on it.

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

If ever want to look up a specific element using jQuery selectors, then, scroll to that element (scrolling a jCarousel by element not by position). It's easy: each jCarousel element has an attribute, jcarouselindex. Look it up with var position = $('#some-element').attr('jcarouselindex'); .

Sample:

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

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

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

where menuOption is an anchor <a> like this one:

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

Note: it's important to use scrollTo - 1 because index is 0 based .

Answer 3

Here is the solution, managed it to work form

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

I have a tabbed interface like:

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

And each tab contains 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;
    });
};

I have checked your site...so thinking you should be able to get the code from here.

In the jCarousel call a function by initCallBack and trigger the custom function when the tab is clicked do go general scroll to position 1 to reset!

Thats it.

Thanks, Enayet