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

**URL:** <https://forum.wixstudio.com/t/how-do-i-make-the-arrows-in-the-pro-gallery-slideshow-only-appear-when-i-hover-how-do-i-write-code-when-using-velo/425>\
**Category:** Ask the community\
**Tags:** code\
**Created:** [May 4, 2023, 3:13pm UTC](https://forum.wixstudio.com/t/how-do-i-make-the-arrows-in-the-pro-gallery-slideshow-only-appear-when-i-hover-how-do-i-write-code-when-using-velo/425 "2023-05-04T15:13:54Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![natalej-ulie5961](https://avatars.discourse-cdn.com/v4/letter/n/6bbea6/32.png) [@natalej-ulie5961](https://forum.wixstudio.com/u/natalej-ulie5961)\
**Post date:** [May 4, 2023, 3:13pm UTC](https://forum.wixstudio.com/t/how-do-i-make-the-arrows-in-the-pro-gallery-slideshow-only-appear-when-i-hover-how-do-i-write-code-when-using-velo/425/1 "2023-05-04T15:13:54Z")

</div>

In this post, we will create a slick slider and later on show you how to show/hide the buttons of the slick slider. For creating a slick slider just declare many elements with the same class name.  
**Example:** In this example, we will create a slick slider using Javascript.

html

 ![]() ![]() ![]()

---

<div class="post-metadata">

**Author:** ![ramonfergusonw55005](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/ramonfergusonw55005/32/24000_2.png) [@ramonfergusonw55005](https://forum.wixstudio.com/u/ramonfergusonw55005)\
**Post date:** [May 26, 2023, 4:49am UTC](https://forum.wixstudio.com/t/how-do-i-make-the-arrows-in-the-pro-gallery-slideshow-only-appear-when-i-hover-how-do-i-write-code-when-using-velo/425/2 "2023-05-26T04:49:55Z")

</div>

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](https://www.prepaidgiftbalance.vip/)