Skip to content

Image Slider

Incorporate a horizontal image slideshow into your web application.

Configuring the image slider

The Image Slider utilizes a flexbox layout for each slide, allowing you to incorporate multiple images within each slide's flexbox.

To configure the image slider, follow these steps:

  • Slides: Add image slides manually by clicking the + symbol in the editor. Alternatively, bind the slider to a list of images, ensuring that the fields within the flexbox align with the image sources in the repeating fields.
  • Slides per View: Specify the number of image slides visible at once.
  • Space Between: Define the spacing between image slides in pixels.
  • Effect: Choose from various transition effects, including:
    • Slide: A basic horizontal sliding effect.
    • Fade: A smooth fading transition between images.
    • Coverflow: A 3D effect where images appear to be stacked.
    • Flip: A 3D flip effect for transitioning images.
    • Cards: A card-stacking effect for a unique transition.
  • Transition Duration: Set the duration of transitions in milliseconds.
  • Navigation: Enable or disable arrow navigation for images.
  • Pagination: Toggle the display of image page indicators.
  • Loop: Enable or disable continuous looping of image slides.
  • Autoplay: Activate autoplay and configure the following properties:
    • Timing: Set the autoplay interval in seconds for images.
    • Linear Transition: Toggle linear transition for image autoplay.
  • Mousewheel Control: Enable or disable control via mousewheel for image navigation.