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.