Scroll based slide update
const $overlaySliderGrid = $('.overlay-slider-grid');
const $overlayslider = $('.overlay-slider');
const $mainparent = $overlaySliderGrid.find('.content-overlayslider');
const $hoverItems = $mainparent.find('.hover-item');
let currentIndex = 0;
const updateSlider = ($item) => {
const newBg = $item.data('bg');
$overlayslider.css('background-image', `url(${newBg})`);
$item.find('.content, .description').addClass('active');
$item.siblings().find('.content, .description').removeClass('active');
};
// Initial load
updateSlider($hoverItems.eq(currentIndex));
// Scroll-based slide logic
$(window).on('scroll', function () {
const scrollTop = $(window).scrollTop();
const overlayOffset = $overlaySliderGrid.offset().top;
const overlayHeight = $overlaySliderGrid.outerHeight();
// Only proceed if section is in view
if (scrollTop >= overlayOffset && scrollTop = 0 && newIndex < $hoverItems.length) {
currentIndex = newIndex;
updateSlider($hoverItems.eq(currentIndex));
}
}
});
}
make above work only broswer scroll not mouse wheel
### ✅ Here's how you can update the code:
1. **Prevent scroll interception inside the `.content-overlayslider`**
2. **Ensure wheel events don't affect the section directly, letting only window scroll control the slide change**
—
### ✅ Updated Script:
if ($('.overlay-slider-grid').length) {
const $overlaySliderGrid = $('.overlay-slider-grid');
const $overlayslider = $('.overlay-slider');
const $mainparent = $overlaySliderGrid.find('.content-overlayslider');
const $hoverItems = $mainparent.find('.hover-item');
let currentIndex = 0;
const updateSlider = ($item) => {
const newBg = $item.data('bg');
$overlayslider.css('background-image', `url(${newBg})`);
$item.find('.content, .description').addClass('active');
$item.siblings().find('.content, .description').removeClass('active');
};
// Initial load
updateSlider($hoverItems.eq(currentIndex));
// Prevent mouse wheel scroll within the section from triggering manual slide changes
$mainparent.on('wheel', function (e) {
// Allow the default behavior so it scrolls the page, but DO NOT attach logic here
// This is intentionally left empty to ensure wheel doesn't override scroll-based logic
});
// Scroll-based slide logic (browser scroll only)
$(window).on('scroll', function () {
const scrollTop = $(window).scrollTop();
const overlayOffset = $overlaySliderGrid.offset().top;
const overlayHeight = $overlaySliderGrid.outerHeight();
// Only proceed if section is in view
if (scrollTop >= overlayOffset && scrollTop <= overlayOffset + overlayHeight) {
const relativePosition = scrollTop - overlayOffset;
const sectionRatio = relativePosition / overlayHeight;
const newIndex = Math.floor(sectionRatio * $hoverItems.length);
if (newIndex !== currentIndex && newIndex >= 0 && newIndex < $hoverItems.length) {
currentIndex = newIndex;
updateSlider($hoverItems.eq(currentIndex));
}
}
});
}—
### ✅ Summary:
– Mouse wheel won't change slides because there’s **no logic inside the `wheel` event**.
– Only **window scroll** changes the slide via scroll position.
Let me know if you want smooth transitions between slides or want to disable mouse wheel scrolling altogether within the slider area.
By default, a mouse wheel scroll also triggers the `scroll` event on `window`, so your slider still reacts. To **block mousewheel-initiated scrolls over the slider**, we need to prevent the section from reacting when the mouse is over it.
—
### ✅ Fixed Version (Block mousewheel scroll effect on slider):
Add a flag to **detect when mouse is over the slider**, and **ignore `window.scroll` logic in that case**:
if ($('.overlay-slider-grid').length) {
const $overlaySliderGrid = $('.overlay-slider-grid');
const $overlayslider = $('.overlay-slider');
const $mainparent = $overlaySliderGrid.find('.content-overlayslider');
const $hoverItems = $mainparent.find('.hover-item');
let currentIndex = 0;
let isMouseOverSlider = false;
const updateSlider = ($item) => {
const newBg = $item.data('bg');
$overlayslider.css('background-image', `url(${newBg})`);
$item.find('.content, .description').addClass('active');
$item.siblings().find('.content, .description').removeClass('active');
};
// Initial update
updateSlider($hoverItems.eq(currentIndex));
// Track mouse enter/leave to detect wheel use
$overlaySliderGrid.on('mouseenter', () => {
isMouseOverSlider = true;
});
$overlaySliderGrid.on('mouseleave', () => {
isMouseOverSlider = false;
});
// Scroll-based slide logic — only if mouse is NOT over the slider
$(window).on('scroll', function () {
if (isMouseOverSlider) return; // Ignore if mouse is hovering over the section
const scrollTop = $(window).scrollTop();
const overlayOffset = $overlaySliderGrid.offset().top;
const overlayHeight = $overlaySliderGrid.outerHeight();
if (scrollTop >= overlayOffset && scrollTop <= overlayOffset + overlayHeight) {
const relativePosition = scrollTop - overlayOffset;
const sectionRatio = relativePosition / overlayHeight;
const newIndex = Math.floor(sectionRatio * $hoverItems.length);
if (newIndex !== currentIndex && newIndex >= 0 && newIndex < $hoverItems.length) {
currentIndex = newIndex;
updateSlider($hoverItems.eq(currentIndex));
}
}
});
}—
### ✅ What this does:
– When the mouse is **hovering over the slider**, it **prevents the scroll-based logic** from running.
– When you scroll via browser scrollbar or trackpad **outside the slider**, it works fine.
– Mouse wheel over the slider won't change slides anymore.
Let me know if you want to also **completely block scrolling inside the slider** or just stop it from affecting the slide logic like above.