To make left/right arrow appears when users hover on left/right of image in Gallery Block Slideshow.
#1. First, follow this guide to upload & get arrow icon url.
#2. Use this code to Custom CSS box
If code doesn’t work, you can comment below, message or send me an email.
div.sqs-gallery-controls .previous, .sqs-gallery-controls .next {
top: 0;
height: 100%;
width: 50%;
margin: unset !important;
padding: unset !important;
background-color: transparent !important;
}
div.sqs-gallery-controls .previous:hover, .sqs-gallery-controls .next:hover {
opacity: 1;
}
.sqs-gallery-controls .previous {
background-image: url(https://content.invisioncic.com/p289038/monthly_2022_09/1773097810_Group12@2x.png.fd2d6dc749f79343ae687e29649cea4f.png);
background-size: 50px;
background-repeat: no-repeat;
background-position: center center;
opacity: 0;
}
.sqs-gallery-controls .next {
background-image: url(https://content.invisioncic.com/p289038/monthly_2022_09/1753379866_Group13@2x.png.54c2b0e59adbe1a1f31f46b8b628398d.png);
background-size: 50px;
background-repeat: no-repeat;
background-position: center center;
opacity: 0;
}
Remember to change icon url + change icon size.
