5

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

Chris
  • 71
  • 1
  • 1
  • 4

3 Answers3

4

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);
    },
Larry Hipp
  • 6,205
  • 3
  • 26
  • 31
  • 1
    Thanks so much. I tried adding this to the click function (for #tab1): $('#carousel1').jcarousel('scroll',1); and it didn't have any effect. Any thoughts as to what I might be doing wrong? – Chris Jan 04 '11 at 04:20
  • Ive stored a reference to the `data` of each element and calling `scroll` works great for me. Thanks a lot – locrizak Jul 22 '11 at 17:46
  • Calling jcarousel on an element like this tries to create a new carousel. With minified jcarousel, it dies with the error `TypeError: c is undefined`. The function you want to call is scroll, and it's a function taking two arguments on the jcarousel instance (stored in `jQuery('#myCarousel').data('jcarousel')` – user56reinstatemonica8 Jan 01 '13 at 19:22
3

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.

Leniel Maccaferri
  • 100,159
  • 46
  • 371
  • 480
user56reinstatemonica8
  • 32,576
  • 21
  • 101
  • 125
  • WOW... really beautiful... You helped A LOT! With your hints I was able to animate to a given anchor in a menu. See the edit I made to your answer. – Leniel Maccaferri Aug 05 '13 at 23:28
1

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

Enayet
  • 11
  • 1