Select the first jcarousel element

Question

I have several instances of jcarousel per page in a tabbed interface. I need to be able to scroll through the first element of each carousel when the corresponding tab is clicked, and I'm not sure how to do this. I looked at an example of static controls ( http://sorgalla.com/projects/jcarousel/examples/static_controls.html ) but cannot figure out how this works 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

- :

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

jCarousel...

• jcarousel. jQuery.data() , .jcarousel() ( : jqarousel Drupal),20 > )
• .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, ( 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, 0.

Answer 3

Here is the solution he manages for the form to work

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 a 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 checked your site ... thinking that you can get the code here.

In jCarousel, the initCallBack function is called and the user-defined function is launched when the tab is clicked. go to general scroll to position 1 to reset!

Here it is.

Thanks Enayet