Image Content Interaction Update
const $overlaySliderGrid = $('.overlay-slider-grid');
const $overlayslider = $('.overlay-slider');
$overlaySliderGrid.find('.hover-item').on('click', function () {
const newBg = $(this).data('bg');
$overlayslider.css('background-image', `url(${newBg})`);
$(this).find('.content').addClass('active');
$(this).find('.description').addClass('active');
$(this).siblings().find('.content, .description').removeClass('active');
});
}
change click icon to mouse over or key board up and down arrow to change image and conent
### JavaScript Code Update
if ($('.overlay-slider-grid').length) {
const $overlaySliderGrid = $('.overlay-slider-grid');
const $overlayslider = $('.overlay-slider');
const $hoverItems = $overlaySliderGrid.find('.hover-item');
let currentIndex = 0; // For tracking the selected item for keyboard navigation
// Function to update background and content
const updateSlider = ($item) => {
const newBg = $item.data('bg');
$overlayslider.css('background-image', `url(${newBg})`);
$item.find('.content').addClass('active');
$item.find('.description').addClass('active');
$item.siblings().find('.content, .description').removeClass('active');
};
// Mouse hover event
$hoverItems.on('mouseenter', function () {
updateSlider($(this));
});
// Keyboard navigation (up/down arrow keys)
$(document).on('keydown', function (e) {
if (e.key === 'ArrowUp') {
currentIndex = (currentIndex - 1 + $hoverItems.length) % $hoverItems.length;
updateSlider($hoverItems.eq(currentIndex));
} else if (e.key === 'ArrowDown') {
currentIndex = (currentIndex + 1) % $hoverItems.length;
updateSlider($hoverItems.eq(currentIndex));
}
});
}### Key Changes Made:
1. **Mouse Hover**: The `mouseenter` event replaces `click` to update the slider when the user hovers over an item.
2. **Keyboard Navigation**: Added `keydown` event listeners for `ArrowUp` and `ArrowDown` keys to navigate through items and update the slider.
– A `currentIndex` variable is used to keep track of the currently selected item.
– The navigation wraps around the list of items using modulo arithmetic.
### Considerations:
– **Accessibility**: Make sure the `hover-item` elements are focusable (e.g., by adding `tabindex="0"` to them) so keyboard users can tab through the elements for better accessibility.
– **CSS Adjustments**: If you need hover or active states to be visually distinguishable, add appropriate CSS for `.hover-item:focus` or `.hover-item.active`.
Let me know if you need further assistance!
### Updated JavaScript Code
if ($('.overlay-slider-grid').length) {
const $overlaySliderGrid = $('.overlay-slider-grid');
const $overlayslider = $('.overlay-slider');
const $hoverItems = $overlaySliderGrid.find('.hover-item');
let currentIndex = 0; // For tracking the selected item
// Function to update background and content
const updateSlider = ($item) => {
const newBg = $item.data('bg');
$overlayslider.css('background-image', `url(${newBg})`);
$item.find('.content').addClass('active');
$item.find('.description').addClass('active');
$item.siblings().find('.content, .description').removeClass('active');
};
// Mouse wheel event
$overlaySliderGrid.on('wheel', function (e) {
e.preventDefault(); // Prevent the default scrolling behavior
const delta = e.originalEvent.deltaY;
// Determine scroll direction
if (delta > 0) {
// Scroll down
currentIndex = (currentIndex + 1) % $hoverItems.length;
} else {
// Scroll up
currentIndex = (currentIndex - 1 + $hoverItems.length) % $hoverItems.length;
}
updateSlider($hoverItems.eq(currentIndex));
});
}### Key Changes:
1. **Mouse Wheel Detection**:
– The `wheel` event is attached to the `.overlay-slider-grid` element to detect scrolls.
– `e.originalEvent.deltaY` is used to determine the scroll direction.
– A positive value (`deltaY > 0`) indicates scrolling down.
– A negative value (`deltaY < 0`) indicates scrolling up.
2. **Prevent Default Scrolling**:
– `e.preventDefault()` prevents the page from scrolling while using the mouse wheel for this interaction.
3. **Circular Navigation**:
– When the user scrolls up or down, the `currentIndex` is updated using modulo arithmetic to loop through the items.
### Notes:
– **Touchpad Scrolling**: This will work for both mouse wheel and touchpad scrolling, as most touchpad gestures trigger the `wheel` event.
– **Performance**: If you notice performance issues, consider throttling the `wheel` event using a debounce or throttle function to limit how often it triggers.
– **Accessibility**: Ensure keyboard users can still navigate, or provide alternative navigation controls.
Let me know if you need help implementing additional features or optimizations!
### JavaScript Code for Fixed Cursor and Arrow Key Navigation
if ($('.overlay-slider-grid').length) {
const $overlaySliderGrid = $('.overlay-slider-grid');
const $overlayslider = $('.overlay-slider');
const $hoverItems = $overlaySliderGrid.find('.hover-item');
let currentIndex = 0; // To track the currently selected item
// Function to update background and content
const updateSlider = ($item) => {
const newBg = $item.data('bg');
$overlayslider.css('background-image', `url(${newBg})`);
$item.find('.content').addClass('active');
$item.find('.description').addClass('active');
$item.siblings().find('.content, .description').removeClass('active');
};
// Set initial state
updateSlider($hoverItems.eq(currentIndex));
// Keyboard navigation (up and down arrows)
$(document).on('keydown', function (e) {
if (e.key === 'ArrowUp') {
currentIndex = (currentIndex - 1 + $hoverItems.length) % $hoverItems.length;
updateSlider($hoverItems.eq(currentIndex));
} else if (e.key === 'ArrowDown') {
currentIndex = (currentIndex + 1) % $hoverItems.length;
updateSlider($hoverItems.eq(currentIndex));
}
});
// Stick the mouse cursor visually in one place (CSS)
const fixedCursorCss = `
body {
cursor: none; /* Hide the system cursor */
}
.custom-cursor {
position: fixed;
width: 20px;
height: 20px;
background-color: #000;
border-radius: 50%;
pointer-events: none;
transform: translate(-50%, -50%);
}
`;
$('head').append(`<style>${fixedCursorCss}</style>`);
// Create and position a custom cursor
const $customCursor = $('<div class="custom-cursor"></div>');
$('body').append($customCursor);
// Position the custom cursor at the desired fixed location
const cursorX = window.innerWidth / 2;
const cursorY = window.innerHeight / 2;
$customCursor.css({ top: `${cursorY}px`, left: `${cursorX}px` });
// Update cursor visibility or animation if needed (optional)
}### Explanation:
1. **Cursor Styling**:
– The real system cursor is hidden using `cursor: none`.
– A custom cursor (“) is displayed at a fixed position on the screen.
2. **Fixed Cursor Position**:
– The custom cursor is positioned in the middle of the screen or any other desired location using `window.innerWidth` and `window.innerHeight`.
3. **Arrow Key Navigation**:
– The `ArrowUp` and `ArrowDown` keys are used to navigate between the items.
– The `currentIndex` is updated to loop through the items in the grid.
4. **Dynamic Content Update**:
– The `updateSlider` function updates the background and content when navigating.
### Notes:
– **CSS Customization**: You can customize the appearance of the custom cursor (e.g., color, size) using the `.custom-cursor` class.
– **Accessibility**: Ensure there is an alternative for users who rely on mouse input or other assistive technologies.
– **Performance**: As the `keydown` event is global, it will listen across the document. If needed, you can limit its scope to specific elements.
Would you like to add animations to the cursor or transitions between content? Let me know!