1. Home
  2. Docs
  3. App Builder – User Guide
  4. Widget catalog
  5. Slideshow

Slideshow

To have a slideshow as expected displays on your app, you should configure it first on the Backend panel by: Go to Admin panel > choose [App Builder] > Select a template that you want to update > Choose option [Home] on the dropdown https://prnt.sc/110v3y3 > Drag Slideshow widget into the builder.

1. Layout:

For this widget, users can insert a slideshow into their Homepage with 5 layouts: Basic, Center mode, Stack, Tinder, Rotate on “Layouts” tab.

2. General configuration:

On “General” tab, users can customize their slideshow with many options:

Autoplay SwiperYes: the slideshow will be played automatically
No: autoplay will be disabled.
IndicatorsShow/hide indicators 
Autoplay delay(ms)Setting delay time (ms)
It is only effective when “Autoplay Swiper” = Yes
Autoplay interval(ms)Setting interval time to autoplay
It is only effective when “Autoplay Swiper” = Yes
Width x HeightSetting width/height for slideshow image
Default is 375 x 330
DirectionThere are 2 options: Vertical and Horizontal
– Vertical: the slideshows will move vertically (up – down)
– Horizontal: the slideshow will move horizontally (right – left)

3. Content block

For this section, please note that:

– Each item is corresponding to a slideshow (https://prnt.sc/11zbanw).

– Each element on the slideshow is corresponding to a layer item (https://prnt.sc/11zb4lc). 

– A slideshow item can have 1 or many layer items (https://prnt.sc/11zbjys).

– For each layer item, there are 4 types: Text, Button, Image, Icon to select (https://prnt.sc/11zbnhx).

Config for Slideshow item
Choose imageSelect an image for slideshow
Image sizeSet width x height for the image
Box fitSet how the image is displayed
Config for Layer item
Type = TextUsers are able to:
– Set position for the text on the slideshow
– Set Text content
– Set an action when customer click on the text (Action field)
Type = ButtonUsers are able to:
– Set position for the button on the slideshow- Set button name (Text field)
– Set background color, button color, button border width, button size, button border radius
– Set an action when customer click on the button (Action field)
Type = ImageUsers are able to:
– Set position for the button on the slideshow
– Text field: to name for the button, will not show on the slideshow.
– Select an image to show
– Set image size
– Set an action when customer click on the button (Action field)
Type = IconUsers are able to:
– Set position for the Icon on the slideshow
– Text field: to name for the icon, will not show on the slideshow.
– Select an icon to show
– Set icon color, icon size
– Set an action when customer click on the button (Action field)
Position
(https://prnt.sc/11zedet)
– Left, Top, Right, Bottom: set a distance between the current layer item (text, image, button, icon) and 4 margins.
– Width, Height: when users input values for these fields => the system will create a textbox automatically, allows users to enter content only in that textbox (https://prnt.sc/11zfd02)so users can configure a layer item more quickly.
Note: In 3 fields: “width, left, right” or “height, top, button” will always have one of them get disabled, we can’t set 3 fields at the same time.
Duplicate a Layer item
(https://prnt.sc/11zec8e)
Click on copy_icon to duplicate the current layer item
Move up/down a Layer item (https://prnt.sc/11zeafe)Users are able to use this function to set a layer item above another one.
Ex: https://prnt.sc/125j0kw
Delete a Layer item (https://prnt.sc/11zebgd)Click on delete_icon to remove the current layer item

4. Style configuration

On “Style” tab, users can set up: padding, margin, animation, Background Section, Indicator color, Indicator Active color.


5. Some examples for slideshow

5.1. Example 1

If you wanna create this slideshow, you can follow these setup below:

Step 1: Create a slideshow item https://prnt.sc/12oiahp

Step 2: Create 5 layers:

Layer 1Type: Texthttps://prnt.sc/12oicnm
Layer 2Type: Texthttps://prnt.sc/12oii3u
Layer 3Type: Texthttps://prnt.sc/12oijp3
Layer 4Type: Buttonhttps://prnt.sc/12oilrk
Layer 5Type: Iconhttps://prnt.sc/12oin0r

5.2. Example 2

If you wanna create this slideshow, you can follow these setup below:

Step 1: Create a slideshow item https://prnt.sc/12oit1a

Step 2: Create 5 layers:

Layer 1Type: Texthttps://prnt.sc/12oizl6
Layer 2Type: Texthttps://prnt.sc/12oj0ck
Layer 3Type: Texthttps://prnt.sc/12oj1ag
Layer 4Type: Buttonhttps://prnt.sc/12oj2l1
Layer 5Type: Iconhttps://prnt.sc/12oj3ez

5.3. Example 3

If you wanna create this slideshow, you can follow these setup below:

Step 1: Create a slideshow item https://prnt.sc/12oj7ji

Step 2: Create 3 layers:

Layer 1Type: Texthttps://prnt.sc/12oj8dz
Layer 2Type: Texthttps://prnt.sc/12oj92l
Layer 3Type: Texthttps://prnt.sc/12oj9mz

5.4. Example 4

If you wanna create this slideshow, you can follow these setup below:

Step 1: Create a slideshow item https://prnt.sc/12ojmah

Step 2: Create 3 layers:

Layer 1Type: Texthttps://prnt.sc/12ojdym
Layer 2Type: Texthttps://prnt.sc/12ojemg
Layer 3Type: Texthttps://prnt.sc/12ojf4f

5.5. Example 5

If you wanna create this slideshow, you can follow these setup below:

Step 1: Create a slideshow item https://prnt.sc/12ojj2y

Step 2: Create 3 layers:

Layer 1Type: Texthttps://prnt.sc/12ojjso
Layer 2Type: Texthttps://prnt.sc/12ojke2
Layer 3Type: Texthttps://prnt.sc/12ojl14

Was this article helpful to you? Yes No

How can we help?