Skip to content

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., 3s5s)
    • Optionally enable Linear transition
  7. To allow mouse wheel control, enable Mousewheel control and adjust Sensitivity or Invert direction if needed.

Example Use Cases

  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.
  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., 500ms800ms) 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

PropertyOptions/TypeDescription
Bind slidesarrayBind to a collection/array to repeat slide layout, or add slides manually
Slides per viewnumberNumber of slides visible at once
Space betweenlength in pxSpace between slides
Effectslide fade coverflow flip cardsTransition effect between slides
Transition durationlength in msDuration of the transition (e.g., 800ms)
NavigationbooleanShow/hide navigation arrows
PaginationbooleanShow/hide pagination bullets
LoopbooleanEnable continuous looping
AutoplaybooleanEnable autoplay
Timinglength in sTime between slides when autoplay is enabled (e.g., 3s)
Linear transitionbooleanUse linear timing for autoplay transitions
Mousewheel controlbooleanEnable mousewheel control
Force to axisbooleanForce scrolling along the slider axis
Invert directionbooleanInvert mousewheel direction
SensitivitynumberAdjust 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

Image elements

Event Triggers

This element does not emit custom events.

Exposed Variables

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

VariableTypeDescription
slideImageStatesobjectPer-slide image loading states
allImagesLoadedbooleanIndicates 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

javascript
{
  "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

javascript
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.

Context data