1

I've been having some problems with implementing the jCarousel plugin for jQuery. The code I'm using is available at http://projects.klavina.com/stackoverflow/index-slider.html

Problem 1: I need to highlight the active external control on slider #1. I found a solution at http://heidzir.com/blog/?p=21, but as already stated in the comments there - this stops working when the slider goes in the 2nd loop.

Problem 2: I need to randomize the slides on slider #2 (quotes) on page load. I found a way to randomize the li's (Randomize a sequence of div elements with jQuery), but the slider stops working and slides only the quote that was loaded first.

Any help would be much appreciated. Thank you!

Community
  • 1
  • 1
klavina
  • 141
  • 3
  • 4
  • 11

2 Answers2

3

I had problem #1 and found a solution which I'd like to share. The problem with circular jcarousels is that the "liindex" doesn't start over with counting from 1 after it ran through all available list elements, but rather continues counting upwards (as you'll notice if you add an alert('liindex') inside the highlight function.

So if you have 3 list elements in a circular auto carousel, once you finish scrolling through the first time and start over with item 1, jcarousel sees it at the 4th item, not the 1st.

Here's my solution (based on this), calculating the liindex with the modular of the total items and the current item. 

            var totalitems = 3; // number of total items in your carousel, you can probably detect it with jquery and replace this 

            function mycarousel_initCallback(carousel) {
                    jQuery('#external ul li a').bind('click', function() {
                            carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text()));
                            return false;
                    });
                    carousel.clip.hover(function() {
                            carousel.stopAuto();
                    }, function() {
                            carousel.startAuto();
                    });
            };
            function highlight(carousel,objectli,liindex,listate){
                    actindex = teasersize - (liindex % teasersize); // calculate which item this corresponds to after first scroll
                    jQuery('#external a').removeAttr("class","active");
                    jQuery('#external a#link'+ actindex).attr("class","active");
            };
            function removehighlight(carousel,objectli,liindex,listate){
                    actindex = teasersize - (liindex % teasersize);
                    jQuery('#external a#link'+ actindex).removeAttr("class","active");
            };
            jQuery(document).ready(function() {
                    jQuery("#mycarousel").jcarousel({
                            initCallback: mycarousel_initCallback,
                            wrap: 'circular',
                            scroll: 1,
                            size: totalitems, // previously set in var
                            auto: 7,
                            itemVisibleInCallback:  highlight,
                            itemVisibleOutCallback: removehighlight,
                            buttonNextHTML: null,
                            buttonPrevHTML: null
                    });
            });

And this is what your external navigation should look like based on the js:

            <ul id="external">
                <li><a href="#carouselitem1" id="link1">1</a></li>
                <li><a href="#carouselitem2" id="link2">2</a></li>
                <li><a href="#carouselitem3" id="link3">3</a></li>              </ul>
rayne
  • 523
  • 1
  • 7
  • 24
1

set the teasersize to the number of list items you have

var teasersize = 4; // if you have 4 list items
Anthony Collini
  • 11
  • 1