How do I make the arrows in the Pro Gallery slideshow only appear when I hover? How do I write code when using velo?

Discussion Ask a question
2

When you hover over the gallery, you can use CSS and JavaScript code.

❮
❯

.slideshow-container {
position: relative;
/* Add any desired styling for the container */
}

.prev,
.next {
display: none; /* Initially hide the arrows /
/ Add any desired styling for the arrows */
}

.gallery:hover .prev,
.gallery:hover .next {
display: block; /* Show the arrows when hovering over the gallery */
}

$w.onReady(function () {
const gallery = $w(‘#gallery’);
const prevArrow = $w(‘#prev’);
const nextArrow = $w(‘#next’);

gallery.onMouseIn(() => {
prevArrow.show();
nextArrow.show();
});

gallery.onMouseOut(() => {
prevArrow.hide();
nextArrow.hide();
});
});

Remember to adjust the code according to the structure and IDs of your Pro Gallery slideshow elements. prepaidgiftbalance