The Divi Theme comes with a gallery module which lets you display pictures in images in both a grid and slider format. The Divi gallery module displays navigation arrows (previous and next) when in slider mode. If you'd like to hide these, here's how you can.
See this post if you'd like to hide the Divi gallery module dot navigation as well.
Hide the Gallery Module Slider Previous and Next Arrows with Divi Gallery Booster
Divi Gallery Booster adds an option to show / hide the slider navigation arrows in the gallery module.
By default, the gallery module displays navigation arrows when you hover over it in slider mode:
To hide this previous / next navigation, disable the arrows by setting:
Gallery Settings > Content > Elements > Show Slider Arrows = No
Note that the option to hide the slider navigation arrows is only shown in slider mode, i.e. when you set:
Gallery Settings > Design > Layout > Layout = Slider
Save the page to apply the changes:
Now when you view the page and hover over the gallery, you should no longer see the arrows displayed:
This option is available in Divi Gallery Booster version 1.2.0 upwards.
Hide the Gallery Module Slider Navigation Arrows with CSS
You can use the following CSS code to hide the gallery arrows on all gallery sliders:
.et_pb_gallery .et-pb-slider-arrows {
display: none !important;
}
Related Post: Adding CSS to the Divi Theme
Hide the gallery arrows when automated
To hide the arrow controls only on automated gallery sliders, you can use this CSS instead:
.et_pb_gallery.et_slider_auto .et-pb-slider-arrows {
display: none !important;
}
Works great, except when the mouse hovers. How do I make them transparent on hover? I tried adding hover to the CSS you provided. Thanks!
Hey Barb, are you able to share a link to a page with one of the galleries you're trying to get this to work on? This code should work even on hover, but perhaps there is something preventing it from taking effect on your site.
I figured it out, thanks for the speedy reply! I am using the CSS code box on the gallery module and needed to include the id’s for next and prev arrows.
Great! Nice work, Barb :)
hi! thanks for this CSS..
it works..
other question is how to avoid visitors clicking on the image on the Gallery Slider, and it popping up?
thanks
-Gabriel
Hey gabriel,
This post explains how to do it:
Stop the Gallery Module Images opening in a Popup
Let me know if it doesn't do what you need. Thanks!