Image Slider

The image slider lets you showcase images in a carousel format. You can choose different transition effects, show navigation arrows and pagination bullets, enable autoplay, and even let users scroll with the mouse wheel. It works with manually added slides or bound data, so you can build simple image galleries or dynamic image slideshows.

Features

• Transition effects: slide, fade, coverflow, flip, or cards
• Controls: navigation arrows and pagination bullets
• Autoplay: optional looping and configurable timing
• Mousewheel: optional wheel control with sensitivity and direction options
• Dragging: control navigation by dragging or swiping

Getting Started

Using AI

The quickest way to set up the image slider is by using AI:

1. Ask AI to add an image slider to your page. Mention:
   • the number of slides and image sources
   • the transition Effect you prefer (e.g., coverflow)
   • whether you want Navigation arrows and Pagination bullets
2. Ask AI to enable Autoplay and set Timing (for example, 5s).
3. Ask AI to style the slider height and position the navigation icons.

Example prompts:

• "Add an image slider with 3 slides showing product images. Use the coverflow effect with arrows and bullets."
• "Enable autoplay at 5 seconds and loop the slides."

Manual Setup

1. Add the Image slider element from the Add panel.
2. Choose how to build slides:
   • Add slides manually by clicking + in the editor, or
   • Bind Bind slides to a collection or array to repeat slide layout with images.
3. Set Slides per view and Space between to control layout on each breakpoint.
4. Pick an Effect and set Transition duration (e.g., 800ms).
5. Turn Navigation and/or Pagination on if you want arrows and bullets.
6. If desired, enable Autoplay:
   • Turn on Autoplay
   • Set Timing (e.g., 3s–5s)
   • Optionally enable Linear transition
7. To allow mouse wheel control, enable Mousewheel control and adjust Sensitivity or Invert direction if needed.

Example Use Cases

Simple image gallery

1. Add 3–5 slides manually and set an image source for each slide.
2. Use the slide effect with Navigation and Pagination.
3. Optionally enable Loop for continuous cycling.

Product showcase carousel

1. Bind Bind slides to a list of product images from your collection.
2. Each slide will display the bound image automatically.
3. Use fade or coverflow effect and enable Autoplay with a 5s delay.

Full-width hero image slider

1. Set the slider to width: 100% and a fixed height (e.g., 600px).
2. Use flip or cards effect for visual impact.
3. Add custom navigation icons and position them absolutely on the sides.

Best Practices

Do:

• use Slides per view and Space between responsively for a great mobile layout
• keep Transition duration reasonable (e.g., 500ms–800ms) for smooth UX
• enable Loop with Autoplay for continuous, passive viewing
• optimize your images for web to ensure fast loading

Don't:

• set very short autoplay Timing that makes images hard to see
• use extremely large images without proper optimization

Forking

While the image slider offers extensive built-in options, you might want extra features. In those cases, you can fork the element and modify it to fit your needs.

If you are unsure how to fork an element, learn more in the dedicated documentation.

Properties Reference

Settings

Property	Options/Type	Description
Bind slides	array	Bind to a collection/array to repeat slide layout, or add slides manually
Slides per view	number	Number of slides visible at once
Space between	length in px	Space between slides
Effect	slide fade coverflow flip cards	Transition effect between slides
Transition duration	length in ms	Duration of the transition (e.g., 800ms)
Navigation	boolean	Show/hide navigation arrows
Pagination	boolean	Show/hide pagination bullets
Loop	boolean	Enable continuous looping
Autoplay	boolean	Enable autoplay
Timing	length in s	Time between slides when autoplay is enabled (e.g., 3s)
Linear transition	boolean	Use linear timing for autoplay transitions
Mousewheel control	boolean	Enable mousewheel control
Force to axis	boolean	Force scrolling along the slider axis
Invert direction	boolean	Invert mousewheel direction
Sensitivity	number	Adjust how sensitive wheel scrolling is

Styling

This element does not have any specific styling properties.

Dropzones/Default Elements

• Slides | Element: each slide contains an image element
• Left Nav Icon | Element: icon used for previous navigation
• Right Nav Icon | Element: icon used for next navigation
• Bullet Nav Icons | Element: icons used for pagination bullets

Event Triggers

This element does not emit custom events.

Exposed Variables

The image slider exposes the following variables for use in your application:

Variable	Type	Description
slideImageStates	object	Per-slide image loading states
allImagesLoaded	boolean	Indicates if all images across all slides have successfully loaded

TIP

You can use the allImagesLoaded variable to condtionally render the slider only once all images are loaded

Example Variable Values

slideImageStates

{
  "0": {
    "images": {
      "0": { "isLoading": false, "isLoaded": true, "hasError": false },
      "1": { "isLoading": false, "isLoaded": true, "hasError": false }
    },
    "loadedCount": 2,
    "loadingCount": 0,
    "errorCount": 0,
    "isLoaded": true,
    "isLoading": false,
    "hasError": false
  },
  "1": {
    "images": {
      "0": { "isLoading": true, "isLoaded": false, "hasError": false }
    },
    "loadedCount": 0,
    "loadingCount": 1,
    "errorCount": 0,
    "isLoaded": false,
    "isLoading": true,
    "hasError": false
  }
}

allImagesLoaded

true

TIP

The slider also provides local context data inside the element and its slots (e.g., current sliderIndex, total nbOfSlides, visibility of navigation, and the number of bullets). These are only available inside the slider's images.