Thread: jQuery Help For a Desperate Student

Hey guys as a student I am working on a website project where I got stuck when I am trying to add a scrolling feature using a javascript.

I wanted to achieve slide show like effect within a div box and i achieved that using the fallowing script

$(function() {

var Page = (function() {

var $navArrows = $( '#nav-arrows' ),
$nav = $( '#nav-dots > span' ),
slitslider = $( '#slider' ).slitslider( {
onBeforeChange : function( slide, pos ) {

$nav.removeClass( 'nav-dot-current' );
$nav.eq( pos ).addClass( 'nav-dot-current' );

}
} ),

init = function() {

initEvents();

},
initEvents = function() {

// add navigation events
$navArrows.children( ':last' ).on( 'mousewheel DOMMouseScroll', function() {

slitslider.next();
return false;

} );

$navArrows.children( ':first' ).on( 'mousewheel DOMMouseScroll', function() {

slitslider.previous();
return false;

} );

$nav.each( function( i ) {

$( this ).on( 'mousewheel DOMMouseScroll', function( event ) {

var $dot = $( this );

if( !slitslider.isActive() ) {

$nav.removeClass( 'nav-dot-current' );
$dot.addClass( 'nav-dot-current' );

}

slitslider.jump( i + 1 );
return false;

} );

} );

};

return { init : init };

})();

Page.init();



});

But this function is only triggered on click and only if the cursor is clicked on the navigation buttons What I would like to achieve is to trigger the same slide like function by using mousescroll and I also want to keep the old click function. This is really important for me and any help will be greatly appreciated.

Thanks in advance.