Slider

Author: Anna Nguyen 537 views

The Slider element helps you add multiple images or text without page scroll. You can click on left-right arrows to navigate between multiple images/text in the slider. You will probably see a Slider on the homepage of most websites, so it is really important.

With EComposer you can create your own slider, there are so many things that you can do. You can add everything to the slider like text, images or buttons… and you can design each slider a style. In addition, you can also make the entire background image of the slider clickable (this is a very useful function). If you do not how to build a Slider for your website, this article will help you.

To add a Slider element to your page, please drag it from the Basic tab to the position that you want.

EComposer divides elements into two separate tabs, the Content tab helps you add content to the elements with the element’s settings. The Design tab includes options that allow you to design for that element.

1. Content

1.1. Slides

The Slider element comes with two slides by default, you can click Add a new slide to add more slides. Also, you can duplicate, remove or move slides. Please watch the below video.

Detail video about adding new, duplicating, and removing slides

Into each slide item tab, you can change the heading (it is the name of the slide and will only appear on the left side of the editor so you can distinguish between the slides), and you can change the background image. Especially, you can add links to background images if you want (this option will make your background image clickable).

Content width: This option allows you to adjust the width for the Slider element. For example, please drag the progress bar to 100% if you want to have a full-width slider. If you set it to less than 100%, there will be space on either side of the slider. You can set the width for different devices.

An example for the Slider width of **90%**. You can see some spaces on the left and right sides of the slider.

Custom height: Here you can change the height of the element to make the background image fully visible. And you should set each device a different size.

Vertical align: This option is used to align the position of the content block into the Slider element. You can align it to the top, middle or bottom.

1.2. Slider settings

In this tab there are many options to configure your slider, the option names are easy to understand so you don’t need to worry about them.

Infinite Loop: Enable this option to loop your slider again upon reaching the final slide.
Autoplay: Enable this option to make your slides automatically advance to the next one. Autoplay works best in conjunction with the Infinite Loop feature. When both functions are enabled, your slides will automatically advance and then loop back to the first slide.
Speed (ms): Set a time limit for the Autoplay in milliseconds.
Items per row: You can set the number of items per row.
Column gap/Row gap: Set the space between the column or row. These options only work when your slider has more than two columns/rows.

Navigation: Here you can select the layout and position for the navigation.

You can select a layout for your Navigation

Navigator: You can select icons for the navigator from our library.

Select icons for the navigation

1.3. Animation

Here you can set the animation for the content block in the slider that will appear when the slide advance to the next one.

2. Design

2.1. Design for slides

Slide animation: We have some available animation options for the slides here, you can select the one you love.

Background: You can set the background color for your slides. But this option will work when you don’t use a background image for your slide.
Border: Set the type of border, choosing from None, Solid, Double, Dotted, Dashed, or Groove. Also, allow editing the border color of the slides.
Border Radius: Set the border-radius to control corner roundness, available for desktop, tablet, and mobile devices.
Spacing: Set the spacing for the slide, available for desktop, tablet, and mobile devices.

An example of the background color for a slide

Note: There are NORMAL, HOVER, and ACTIVE. NORMAL is the pagination that you see first when browsing the Slider element. HOVER is the tags you see when you hover on. ACTIVE is your current position of the Slider. You can customize both with different designs.

2.2. Design for Navigation

Navigator: We have enough options for you to design the navigator however you want. You can change the size, rotate, color, background color, border-radius and spacing

Pagination: The design options are almost similar to Navigator. You can set Alignment, width, height, color, border, border radius and spacing for the Pagination.