...
- Background Image Attribute: set the attribute for the background image. You can see the effect of each setting on the demo banner.
- Position: select the position for the background image on the drop-down list and check the layout on the left side.
On Item Content Configurations
...
On the Content Configuration
- Type: there are three types of content: button, text, HTML.
- Custom Class: enter the custom class which is defined on the Style Configuration.
...
- To add more content box, click on the Add Content box button under the style box then choose the type for the new content box and . Then set the configuration for it.
Note:
- The change for each setting on Content Configuration will not be displayed on the quick preview box to avoid the layout broken.
If you choose Single Slider type: There are some additional settings besides that in the banner setting.
- Under the style quick preview box, click on Add New Slider Item button to add a number of sliders that you expected. Then click on each Slider Item button on the left to configure for each slider.
...
- Margin (Spacing between items): set the distance between the slidersslider items. The unit for space is Px.
...
- Custom Css: define the custom Css to style the slider.
- On Item Configurations and Item Content Configurations, follow the instruction above for this part of Banner Settings.
If you choose 2 Slider - Slider Syncing type, it will create two interactive sliders :
- In this option, there will be 2 default slider created. These slider will display on the front end
...
- at the same time and interactive with each other.
- On each slider configuration, click on Add New Slider Item button to create new slider items. Note that when a number of slider items created on one slider, the equal number of slider items will be generated automatically on the other slider.
- Then set the configuration for each slider and slider item following the instruction above.
...
Note:
- There will be a number of slider items created automatically on one slider that is equal to the number of slider items added on the other slider.
- The item on one slider will display in at the same time with the item that in the same order on the other slider. For example, the slider item 2 in slider 1 will display with the slider item 2 in the slider 2 at once.
...