Hide Navigation Arrows in the Divi Gallery Slider Layout using Divi Gallery Booster

This method shows how to hide the navigation arrows in Divi’s Gallery module (Slider layout) using the Show Slider Arrows setting provided by the Divi Gallery Booster plugin (also available in Divi Booster). It’s a simple, no‑code approach that keeps the arrows hidden at all times, including on hover, so your images remain the focus.

Set Gallery Layout to Slider and Hide Arrows with Divi Gallery Booster

Open your Gallery Module settings and head to the Design tab. In the "Layout" section, select 'Slider' as the layout. Then, switch to the Content tab, open the 'Elements' section, and use the search box to find the “Show Slider Arrows” setting. Toggle this option to "No". This will hide the slider arrows completely, even when you hover over the images. Your gallery will now display images using the slider layout without any navigation arrows getting in the way.

Save and View Your Changes

Once you've set "Show Slider Arrows" to No, don't forget to publish or save your page. After publishing, view your gallery on the front end and confirm that your slider is in the correct layout with no navigation arrows visible—even when you hover over the gallery area.

Hide Slider Navigation Arrows in the Divi Gallery Module using CSS

This method shows how to hide the Gallery slider’s left and right navigation arrows by adding a small CSS rule directly in the module’s Custom CSS field. It’s a quick, no-plugin approach that keeps the arrows hidden at all times—even on hover—while allowing navigation via swipe or autoplay.

Set Gallery Layout to Slider

Open the Gallery Module settings and go to the Design tab. Expand the "Layout" section, then choose 'Slider' from the Layout dropdown to switch your gallery to the slider layout. This ensures your gallery is displayed as a single large image at a time instead of a grid.

Hide Slider Arrows using Custom CSS

With the Gallery module settings still open, go to the Advanced tab and expand the 'Custom CSS' section. Enable the Free-Form CSS field and paste the following CSS rule to hide the slider navigation arrows:

selector .et-pb-slider-arrows { display: none !important; }

This code ensures the left and right arrows are fully removed, even when hovering over the gallery.

Save and Preview Your Gallery

Publish or save your page, then view the gallery on the front end. Move your mouse over the slider to confirm that the navigation arrows are gone, leaving only your beautiful images on display.