Search code examples
javascriptjqueryjcarouselmousewheel

JQuery JCarousel (not lite) and mousewheel. need help


I use those js files below:

jquery-1.4.2.min.js
include/jcarousel/lib/jquery.jcarousel.min.js
include/mousewheel/jquery.mousewheel.js

in my index.php file i got :

 jQuery(document).ready(function() {
jQuery('#mycarousel').mousewheel(function(event, delta) {
                    if (delta > 0)
                    {carousel.prev();}
                    else if (delta < 0)
                    {carousel.next();}
        });
jQuery('#mycarousel').jcarousel({

    size: mycarousel_itemList.length,
    itemLoadCallback: {onBeforeAnimation: mycarousel_itemLoadCallback},
visible: 3,
btnNext: null,
 btnPrev: null,

});

});

I believe the problem is with

{carousel.prev();}
{carousel.next();}

I want to add mousewheel to my jcarousel but i cant find the appropriate function to be called when i scroll my wheel. Please help me. Further information maybe requested. I'm doing on my own till now. :(


Solution

  • carousel.prev(); and carousel.next(); will not work as carousel is undefined. You need to specify a callback function in which you can then manually run the carousel functions.

    For Example:

    jQuery('#mycarousel').jcarousel({    
        size: mycarousel_itemList.length,
        itemLoadCallback: {onBeforeAnimation: mycarousel_itemLoadCallback},
        visible: 3,
        btnNext: null,
        btnPrev: null,
        // The callback function to run
        initCallback: mycarousel_initCallback,    
    });
    
    function mycarousel_initCallback(carousel) {
        // All code referencing the carousel in here.
        jQuery('#mycarousel').mousewheel(function(event, delta) {
            if (delta > 0)
                {carousel.prev();}
            else if (delta < 0)
                {carousel.next();}
            });
    
    }
    

    Read more here in this example: http://sorgalla.com/projects/jcarousel/examples/static_controls.html

    Hope this helps!