The Slider block in Frontis lets you display multiple images, text, or content in a sliding format, one after another. Visitors can click or swipe to see the next slide. 

Adding Frontis Slider Block 

To insert the Slider block, navigate to the post or page where you wish to include it. Next, tap the (+) plus icon located at the upper left corner of the display.

The Frontis menu bar interface will appear. Search for the Slider block in the search box or select it from the menu bar.

After inserting the Slider  blocks, follow the steps below;

• Click on the Document Overview button, and you will be able to view the block list on the right side.
• Click on the block; all the control tabs will show here (Basic, Style, and Extra).

Basic Section

Basic Settings: In this section, the Navigation toggle shows or hides the arrows for moving between slides, and the Pagination toggle shows or hides the dots for jumping to a specific slide. You can also set a Minimum Height for the slider to control how tall it appears on the page.

Slider Type: This feature lets you choose between a single-slide Slider or a Carousel that shows multiple slides at once.

Carousel Setting: Here, you can adjust the Column Number and add Column Gap as your work needs.

Carousel Effect: In the Carousel Effect of the slider block, there are usually two main effects:

1. Slide Effect – slides move smoothly one after another, like a normal slider.
   
2. Coverflow Effect – Slides appear in a 3D angled style, with the center slide in focus and the side slides tilted, creating a rotating carousel effect.

Slider Options: The Slider Options provide toggles such as Enable Loop, Allow Touch Move, Pause on Hover, Stop on Last Slide, Reverse Direction, Enable Mouse Wheel, and Enable Autoplay. Simply turn on the toggles you need. Transition speed is also customizable in this section.

Navigation: The Navigation feature shows or hides arrows and dots to move between slides.

Custom Icon: Enable the custom icon toggle to add any icon or image. Choose its position type (inside or outside) and set the position to center, top left, top center, top right, bottom left, bottom center, or bottom right.

Pagination: The Pagination feature shows or hides the dots at the bottom of the slider that let users jump to specific slides. There are three types of pagination: Bullets, Progress Bar, and Fraction.

Style Section

Navigation Style: The Navigation feature includes options to change the Icon Text Color and Hover Color, adjust its size, width, and height, and add a Border with a Border Radius.

Pagination Style: This feature sets the Position and Margin of the pagination, adjusts its Height and Width, changes its Color and Border Color, and adds a border with Border Radius.

Extra Section

Z-Index: Consider the z-index as layers of sheets on a table. The greater the z-index, the more “above” the element appears. Therefore, if two elements intersect, the one with the greater z-index will be displayed in front.

However, it functions only when the element is positioned (relative, absolute, fixed, or sticky). Without it, z-index has no effect. 

Overflow section: The Overflow feature in the Advanced section of Frontis Blocks controls how extra content behaves when it goes beyond the block’s size. The overflow property determines the action to take in this scenario.

Values of overflow:

• Visible:- The visible overflow value shows all content, even if it goes outside the box. It won’t be hidden or cut off, and no scrollbars will appear. 
• Hidden: The hidden overflow value hides any content that goes outside the box. It gets cut off, and no scrollbars appear, so users can’t see the extra content.
• Scroll: The scroll overflow value always shows scrollbars. If the content is too big, you can scroll to see it. Even if there’s no extra content, scrollbars still appear.
• Auto: The auto overflow value adds scrollbars only when needed. If the content fits inside the box, no scrollbars show. If it overflows, scrollbars appear automatically.
• Clip: The clip overflow value hides any content that overflows the box without showing scrollbars. The extra content is simply cut off and cannot be seen or scrolled.

Padding: Padding allows you to add spaces around an object to increase the inner area. You can also add space on a single side with this feature. Click on the Link icon and add or reduce the padding on any side you want.

Margin: Margin enables the adjustment of an object’s placement on the canvas. With this feature, you can add a margin around an object or a single side. Click on the Link icon and add or reduce the Margin on any side you want.

Border and Shadow: You can place a border around the entire area and adjust the border color and border radius. This option allows you to apply a box shadow to the Marquee Carousel block.

Responsive Control: In this section, you will get 3 switches (Hide on Desktop, Hide on Tablet, Hide on Mobile). These switches let you show or hide the section on different devices.

Custom CSS: If you are an expert or have coding knowledge, you can add custom CSS in this section to make it responsive.