I have a slider in the middle of a long home page. I move down the page with my my mousewheel and trackpad and when it gets to this section, the scrolling stops and starts scrolling through the slider. How can I remove the mouse wheel/trackpad functionality for this div so that I can easily scroll all the way down the page?
The slider looks like this:
<div class="content_slider_wrapper" id="slider1"></div>
$(document).ready(function() {
var image_array = new Array();
image_array = [
{image: ‘myimage.jpg',
main_link: '', main_link_target: 0,
upper_text_label_show: 0, upper_text_label: '', upper_text_label_style: '',
lower_text_label_show: 1, lower_text_label: ‘My Item’, lower_text_label_style: 'color: black; font-family: Arial;'},
];
$('#slider1').content_slider({ // bind plugin to div id="slider1"
map : image_array, // pointer to the image map
middle_click: 3,
max_shown_items: 7, // number of visible circles
hv_switch: 0, // 0 = horizontal slider, 1 = vertical
active_item: 1, // layer that will be shown at start, 0=first, 1=second...
wrapper_text_max_height: 110, // height of widget, displayed in pixels
small_pic_height: 160,
small_pic_width: 160,
child_div_width: 180,
child_div_height: 180,
big_pic_width: 462,
big_pic_height: 462,
hide_prettyPhoto: 1,
hide_arrows: 1,
middle_click: 3, // when main circle is clicked:
auto_play: 1,
enable_scroll_with_touchmove_on_horizontal_version: 0,
enable_scroll_with_touchmove_on_vertical_version: 0,
// 1 = slider will go to the previous circle, 2 = to the next,
// 3 = open 'main_link', 0 = nowhere (no response)
border_radius: 5, // -1 = circle, 0 and other = radius
border_on_off: 0,
mode: 2,
});
});
I tried the following and they didn't work:
$(window).unbind('scroll');
$('#slider1').bind('mousewheel DOMMouseScroll', function(e) {
var scrollTo = null;
if (e.type == 'mousewheel') {
scrollTo = (e.originalEvent.wheelDelta * -1);
}
else if (e.type == 'DOMMouseScroll') {
scrollTo = 40 * e.originalEvent.detail;
}
if (scrollTo) {
e.preventDefault();
$(this).scrollTop(scrollTo + $(this).scrollTop());
}
});
