Gallery Reel Slideshow Change Arrows

I would like to change the Gallery Reel slideshow arrows across the entire website for 7.1. This can be either to a specific image or something similar to the image attached.

Also, would it be possible to make them fade in and out? If not, no problem as long as I can change them.

I've tried the code from three other posts in this forum from last year but none of those have worked.

7 hours ago, AllanYung said:

I would like to change the Gallery Reel slideshow arrows across the entire website for 7.1. This can be either to a specific image or something similar to the image attached.

Also, would it be possible to make them fade in and out? If not, no problem as long as I can change them.

I've tried the code from three other posts in this forum from last year but none of those have worked.

try this

.gallery-reel-control-btn-icon svg {
  display: none;
}
.gallery-reel-control-btn-icon {
  background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='1000' viewBox='0 0 1000 1000' width='1000' xmlns='http://www.w3.org/2000/svg'><path d='M767.9,499.9L291.6,10l-59.4,61.3l416.6,428.7L232.1,928.7l59.5,61.3L767.9,499.9z'/></svg>");
    background-repeat: no-repeat;
    background-size: cover;
}
[data-previous] .gallery-reel-control-btn-icon {
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}

22 hours ago, bangank36 said:

try this

.gallery-reel-control-btn-icon svg {
  display: none;
}
.gallery-reel-control-btn-icon {
  background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='1000' viewBox='0 0 1000 1000' width='1000' xmlns='http://www.w3.org/2000/svg'><path d='M767.9,499.9L291.6,10l-59.4,61.3l416.6,428.7L232.1,928.7l59.5,61.3L767.9,499.9z'/></svg>");
    background-repeat: no-repeat;
    background-size: cover;
}
[data-previous] .gallery-reel-control-btn-icon {
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}

This worked perfectly! Thanks so much!

Thank you for sending this code over bangank36.

I am wondering how to move the arrows from both side a little bit more to the inside (see photo attached)?

On 5/19/2022 at 9:36 PM, Jeremyn said:

Thank you for sending this code over bangank36.

 

I am wondering how to move the arrows from both side a little bit more to the inside (see photo attached)?

 

It is Slideshow Reel or List Slideshow or Gallery Slideshow? What is your site url?

Hi Tuan,

This is a gallery slideshow reel on the home page of https://www.creativeportrait.net.au/

I am looking at having the arrow off the pricing guide button.

Thank you.

On 5/21/2022 at 4:09 PM, Jeremyn said:

Hi Tuan,

 

 

This is a gallery slideshow reel on the home page of https://www.creativeportrait.net.au/

 

I am looking at having the arrow off the pricing guide button.

 

 

Thank you.

Add to Pricing Page Header

<style>
  [data-test="gallery-reel-control-btn-previous"] {
    position: relative;
    left: 50px;
}
  [data-test="gallery-reel-control-btn-next"] {
    position: relative;
    right: 50px;
}
</style>

Awesome! It works perfectly. Thank you so much Tuan, I really appreciate it.