Spectra Slider Block is an intuitive tool for Spectra Page Builder. Make use of the Slider block to create professional-looking, responsive sliders with ease. If you have an E-Commerce website, you can create visually stunning product sliders to showcase your products on your website.

Use of Slider block in Spectra

This slider is a great slider module that you can use to showcase images, display some text, and also you can put a CTA on it. For this reason, it can be a quick way to create a hero slider. You also have customization options, like setting the typography, colors or the style of your text. The slider has the option to set a slider background image, where you can adjust the size of the image.

How to use Slider block?

First, make sure you have installed and activated the Spectra plugin.

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

General Settings

Under General Settings, you can see Slider, Navigation, and Content modules.

Slider:

Here, you can see a toggle button to enable autoplay. This setting will only apply when you are viewing the live page, not while you are editing. You can adjust the autoplay speed, and you can also choose to pause the slideshow when it is paused or hovered over. You can adjust the height of the slide, the number of slides per show, and the gap between slides. Finally, you can set the transition effect and transition speed. (To illustrate how the height of the slide changes, we have added a background image to the slides in the reference video.)

Navigation:

Under the navigation, you have toggle buttons for arrows and dots. Also, there is a toggle button that allows you to enable hash navigation. This feature allows you to directly navigate to a slide from the URL by using the slide navigation slug. The slide slug can be set by clicking on the child slide blocks.

Content:

The vertical alignment options allow you to control how the content in the content module is aligned vertically within the slider. You can choose from top, middle, bottom.

Style Options

The slider module style options allow you to customize the appearance of your slider. 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.

Background

You can 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.

Border

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 is hovered.

Box shadow

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

Spacing

You can 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

You can 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.