Image Slider

---

This UI element lets you display a series of images in a horizontal layout. The users can navigate between the images by clicking on the arrows corresponding to the slider or by swiping on a touchscreen device.

Adding Images

To add images to the slider, select the Data tab on "Widget Panel". Now, click on Preload Data event handler, and enter the following code:

  const data = [
    { idx: "1", name: "name1", image: "https://.../01.jpeg" },
    { idx: "2", name: "name2", image: "https://.../02.jpeg" },
    { idx: "3", name: "name2", image: "https://.../03.jpeg" },
    { idx: "4", name: "name3", image: "https://.../04.jpeg" },
    { idx: "5", name: "name4", image: "https://.../05.jpeg" },
    { idx: "6", name: "name5", image: "https://.../06.jpeg" }
  ]
  return data

//Where...
//idx is the index no. of the image.
//name is the assigned name for the image.
//image is the URL of the image.

Image Slider Properties

Property	Description
Show Elements	Sets the number of images that are displayed per slide. [example: When you set it to "3"...]
Carousel Width	Changes the width of the carousel.
Enable Dotslide	Adds a dot-slider under the image carousel - by clicking on a dot, you scroll the view to the respective slide. Note: The number of dots that are available correspond to the number of slides needed to display all of the images (based on the value in the "Show Elements" field).
Enable Arrows	Displays an arrow icon to the sides of the image slider. Clicking on the arrow lets you navigate the carousel.
Width	Changes the width of the images.
Height	Changes the height of the images.
Margin (Top / Right / Left / Bottom)	Adds space between the images (within the slider component). Each side is adjusted by changing the values of the respective fields.
Icon Size	Changes the size of the arrow icons.
Icon Background	Changes the color of the arrow icons.

---

API Methods

setVisibility

Sets the Visibility flag for this component.

Method

setVisibility(visible: boolean): void

Usage

// Setting the visibility to "true" makes the element visible
a8forms.ImageSlider("imageSliderId").setVisibility(true)

// Setting the visibility to "false" makes the element invisible
a8forms.ImageSlider("imageSliderId").setVisibility(false)

setVisibilityCondition

Sets the visibility condition for this component.

Method

setVisibilityCondition(condition: string): void

Usage

// Sets a condition for changing the element's visibility status.
a8forms.ImageSlider("imageSliderId").setVisibilityCondition("1 === 1")

Event Handlers

Event handlers allow you to set triggers for various actions based on the fired events. They are as follows:

onClick

onClick - Sets the actions to be triggered when the component is clicked.