No results found. Try again with different words?
Search must be at least 3 characters.
- Using Spectra Heading Block
- Buttons
- Post Grid
- Content Timeline
- Social Share
- Google Map
- Add Testimonials to Your WordPress Website
- Info Box
- Team
- Icon List
- Price List
- Post Masonry
- Post Carousel
- Post Timeline
- Call To Action
- Advanced Columns
- Blockquote
- Marketing Button
- Gravity Form Styler
- Table Of Contents
- How-to Schema
- FAQ – Schema/ Accordion
- Inline Notice
- WP – Search
- Review Schema
- Lottie
- Taxonomy List
- Tabs Block
- How to Create Contact Forms for Your WordPress Website
- Star Rating
- Masonry Image Gallery
- Wireframe Blocks
- Spectra – Heading Block
- Spectra – Image Block
- Spectra – Buttons block
- ‘Translate Everything’ Feature in WPML
- Spectra – Container Block
- Spectra – Taxonomy Styling Options
- Spectra – Block Presets
- Image Gallery
- Counter Block
- Modal Block
- Registration Form Block
- Slider Block
- Custom CSS On Page Level
- Countdown Pro
- Designing Custom Navigation for Your Slider
- Instagram Feed
- Loop Builder
- Animations
- Using Spectra Login Form Block
- Global Block Style Extension
- How to Create Popups Using Spectra
- How to Add Custom Blocks Under Spectra Blocks
- Move Block Patterns from One Site to Another
- Getting Started with Grid Builder
- Adding a Newsletter Form to Your WordPress Site Footer
- How to Register High-Privileged Users on Your Website
- Section
- Troubleshooting – Icons missing from the blocks
- Spectra Patterns
- How to Set Multiple Column Fields in Contact Form 7 Styler of Spectra?
- Styling Checkbox / Radio / Acceptance control in Contact Form 7 Designer block of Spectra
- Unable to Style Checkbox / Radio Buttons / Acceptance Control using Contact Form 7 Styler of Spectra
- Tab Index – for multiple Gravity Forms
- How to Get Started with Spectra
- How to Exclude A Heading from Table of Contents?
- Spectra – Display Conditions for Blocks
- Installing and Importing Starter Templates
- How to Get Started with Spectra
- Manually Install Spectra via FTP
- Automatic Beta Updates for Spectra
- How to Rollback to Previous Spectra Versions
- How to Load Google Fonts Locally
- Activate the Spectra Pro License Key
- How to Install Spectra Pro Plugin
- Translate Spectra Strings using Loco Translate
- How to add a Transparent / Sticky header?
- How to Change the Site Logo?
- How to Change Global Styles?
- How to Disable Title on Posts, Pages?
- How to add a transparent/ sticky header for a single page/post?
- Change Header and Footer Patterns in Spectra One Theme
- Add Custom/Google Fonts In Spectra One
- How to reset global default styling?
- Manually Install Spectra One via FTP?
- Disable or Enable Header/Footer for Specific Pages/Posts
Designing Custom Navigation for Your Slider
This guide explains how to design custom navigation for your sliders using the Spectra plugin. It covers the importance of custom navigation, the steps to create it, and some helpful tips and examples to make your slider navigation stand out.
What is Slider Block in Spectra
You can use this slider module to showcase images, display some text, and also you can put a CTA on it. You also have customization options, like setting the typography, colors, or style of your text. The slider has the option to set a slider background image, where you can adjust the size of the image.
Why is Custom Navigation Important for Sliders?
Custom navigation enhances the user experience by making it easier for visitors to interact with your slider. It allows you to match your navigation controls with your website’s design, making everything look more professional.
How to Use Slider block?
You must have the Spectra Pro installed and activated in order to use the Custom Navigation feature.
To insert the Slider block, click the Toggle block inserter + icon and look for the Slider block.
Custom Navigation in Slider Module
In the General settings, find the “Navigation” section and enable the “Custom Navigation” toggle.
Once you enable the custom navigation toggle, you will see two classes: .next
and .prev
. You can use these classes to create custom links to navigate the slider.
To gain a more comprehensive understanding of this functionality, you can watch the below attached video.
We hope this guide has been helpful! If you have any questions or feedback, please leave a comment. Your input is valuable to us.
We don't respond to the article feedback, we use it to improve our support content.