How to create a slider element

How to create a slider element

Reactive allows you to add multiple slides to your website that work perfectly, without a fuss. 

To create a slider element, visit the admin panel and click the Pages section under Website.

  • Create a new page or edit an existing one. You can refer to our documentation about How to create a Page for more information.
  • From the Content tab select the container and column you would like to place the slider. 
  • Click the Add element button.
  • Select Slider from the library.  


Slider settings

Transition effect: You can choose between slide, fade, cube, coverflow or flip effect to switch between slides. 

Slides per page: This setting allows you to control how many slides will be shown on your page. 

Select between arrows, dots or scrollbar to control slides transitioning manually. 

Space between: Set the space between the slides.

Width: Set the width of the slides. 

Height: Set the height of the slides.

Margin: This setting allows you to control the space around the element's border by changing the top, bottom, left and right values. 

Once you have done click the save settings button at the bottom right of your screen. 


How to create a new slide

Click Add slide at the top left of your screen. You can drag and drop slides to change their position, delete or copy a slide. When you click on the pen icon the slide settings open up. 

Upload an image to display. You can select an existing image from your browse gallery or add an image link. 

Link. In this section you can add a hyperlink to your slide. 

Link target. Set how the link opens. Choose between "Open link in same tab" for the same window or "Open link in new tab" for a new tab. 
Object fit. This setting defines how an element responds to the height and width of its content box.
Maintain aspect ratio and clip protrusions. The slide keeps its aspect ratio, but is resized to fit within the given dimension. 
Maintain aspect ratio. This value increases or decreases the size of the slide to fill the box while preserving its aspect-ratio.
Fill by stretching. This value stretches the slide to fit the content box, regardless of its aspect-ratio.
Auto. The slide is not resized. 
Alternative name. Use an alternative text to describe the appearance and function of your slide for SEO purposes and better user experience. 

Once you have created your slide click the "Apply" button at the bottom right of your screen. 

    • Related Articles

    • How to create a Google Map element

      The Google Map element allows you to add customized maps anywhere on your site. To create a new Google Map element, navigate to the Pages section from the sidebar menu of your admin panel under Website. Create a new page or edit an existing one. You ...

    • How to create a Code Block element

      The code block element is very useful. This allows you to embed the custom code that you want onto your page. To create a code block element, navigate to the Pages section from your Reactive admin under Website. Create a new page or edit an existing ...

    • How to create an accordion element

      To create an accordion menu on your Reactive website, you can use the Accordion element. This element allows you to create a menu that expands and collapses when clicked, providing a clean and organized way to present your content. Here’s how to ...

    • How to create a text element

      The text element allows you to add text content right into your page. To create a text element, navigate to the Pages section from the sidebar menu of your admin panel under Website. Create a new page or edit an existing one. You can refer to our ...

    • How to create a product element

      Reactive allows you to add products into your content. You have full control over which products display, and how they are presented. To create a product element, navigate to the Pages section from the sidebar menu of your admin panel under Website. ...