How to Hide Slideshow Arrows Using Custom CSS in Zibster
Banner Blocks and Images Blocks in the Zibster Website Builder allow you to create image slideshows. When you add multiple images to one of these blocks, navigation arrows automatically appear so visitors can scroll through the images manually.
This guide explains how to hide slideshow arrows on a single page only using custom CSS.
Prerequisites
Before you begin, make sure:
-
You have access to the Zibster Website Builder
-
Your website has already been created and is editable
-
You are comfortable copying and pasting a small snippet of CSS
STEP ONE:
Log in to your Zibster account and click WEBSITE in the left side menu.
STEP TWO:
Open the page where you want to hide the slideshow arrows.
In the Website Builder:
-
Click on the page you want to edit.
-
Click SEO in the upper-right corner of the page.
STEP THREE:
Add the custom CSS to hide the slideshow arrows.
In the HEAD field, paste the following code exactly as shown:
FINAL STEP:
Click Save to apply your changes.
The slideshow arrows will no longer appear on this specific page. They will remain visible on all other pages of your website.
Additional Notes
If the arrows still appear:
-
Refresh the page and clear your browser cache.
-
Confirm the images are inside a Banner Block or Images Block.
-
Make sure the code is pasted into the page-level SEO → HEAD section (not a global code area).
-
Verify you clicked Save after adding the code.
If the issue continues, contact Zibster Support for assistance confirming the correct block type is being used.
