No results found. Try again with different words?

Search must be at least 3 characters.

Slider Block

Spectra Slider Block is an intuitive tool for Spectra Page Builder. You can use the Slider block to create professional-looking, responsive sliders easily. 

If you have an E-Commerce website, you can create visually stunning product sliders to showcase your products on your website.

How to Add Sliders In Spectra?

To insert the Slider block, click the Toggle block inserter + icon and look for “Slider”.

Common Slider Settings

Note: Some features like hash navigation, slide gap adjustment, and custom navigation are exclusively available with Spectra Pro.

Under General Settings, you can see the “Slider” and “Navigation” modules.

Enable Slider Autoplay

  • Under “Slider”, you can enable “Autoplay”. This setting will only apply when you are viewing the live page, not while you are editing. 

You can also adjust the autoplay speed for a better user experience.

  • Enabling the “Infinite Loop” option makes the slideshow move indefinitely.

Slider Effects

  • Stops the slideshow when it is paused or hovered over by the user.
  • The “Transition Effect” option allows you to add animations to the slider movement, while “Transition Speed” controls how swiftly the slides transition.
  • Under “Navigation”, you can display either arrows or dots for navigating between slides.

Here’s a video walkthrough of these options:

Editing & Deleting Individual Slides

To delete or edit individual slides from the slider, do the following:

  • Click the List View icon on the top left, then select the “Slider” element
  • Select the slide child you want to remove, click the three dots next to it, and delete it.

To add a new slide, select the slider block and click on this + icon.

Styling Spectra Sliders

Slider style options allow you to customize the slider appearance. You can choose the background type, add a border, apply a box shadow, and set the spacing. 

You can also customize the appearance of the arrows and dots. Here are some of these options:

Customize Slider Background

Choose the background type for your slider. You can choose a solid color, a gradient, or an image. If you choose a solid color, you can also choose the opacity.

Slider Border Options

You can add a border to your slides. You can choose the width, radius, and color of the border. You can also choose different border colors for when the slide is normal and when it’s hovered.

Adjusting Slider Box Shadow

Add a box shadow to your slides. You can choose the color, opacity, spread, blur, and inset of the box shadow.

Slider Spacing

Set the padding and margins for your slides. This will control the amount of space between the slides and the edges of the slider.

Arrows and Dots for Slider Navigation

Customize the appearance of the arrows and dots that are used to navigate the slider. You can choose the color, background color, and padding of the arrows and dots.

That’s it with this guide! For any questions, please open a support ticket below to reach us.

Was this article helpful?

Did not find a solution? We are here to help you succeed.

Related Docs
Build Ultra High Performance
Websites, Without Coding

Whether you are a beginner, marketer, or professional, Spectra has the tools and resources you can rely on to succeed

Get Notified When Available

Note - You can purchase the Essential Toolkit now and easily upgrade to the Business Toolkit once it becomes available.

Download is Just A Click Away!

Enter your email address and be the first to learn about updates and new features.

Get your hands on Spectra Pro

Enter your name and email address to get access to Spectra Pro.