Skip to content

Images slides

Jump to bottom
Viet Ngoc edited this page Jun 9, 2025 · 3 revisions

Image slides allow you to upload or link images that will be displayed in a rotating slideshow on the card. This feature can be used to showcase vehicle-related images, such as maps, dashboards, or even real-time snapshots from cameras.

Key Features

  • Image Upload & Linking: You can upload images directly from your device or link to external image URLs (e.g., snapshots, maps, rendered dashboards).
  • Slideshow: The images cycle through automatically at defined intervals, offering a dynamic visual display.
  • Customization: Fine-tune the appearance with options like max width/height, transition speed, slideshow effects, and more.
  • Editor Preview: When adding images in the UI editor, a live preview of each image is shown—helping you see exactly how your card will look.
  • Drag-and-Drop Reordering: Easily rearrange the order of your images directly in the editor using drag-and-drop. No need to manually adjust the configuration.

New Swiper Configuration Options

The latest release introduces advanced swiper configuration options, allowing for more control over how images are displayed.

Swiper Configurable Options:

  • Max Height: Set the maximum height for the image slides.
  • Max Width: Set the maximum width for the image slides.
  • Autoplay: Automatically transition between images after a specified delay.
  • Loop: Whether the slideshow should loop indefinitely.
  • Delay: The amount of time (in milliseconds) each image stays on screen before transitioning to the next.
  • Speed: How fast the transition between images happens (in milliseconds).
  • Effect: Choose between different transition effects for the slideshow:
    • slide: A classic sliding effect.
    • fade: A smooth fade between images.
    • coverflow: A 3D coverflow effect that adds depth to the transition.
  • Hide Pagination: Whether hide the pagination bullets.

Images slides

Yaml Example 
images:
  - title: sample-car-3.png
    url: >-
      https://raw.githubusercontent.com/ngocjohn/vehicle-status-card/refs/heads/main/assets/sample-images/sample-car-3.png
  - title: sample-car-2.png
    url: >-
      https://raw.githubusercontent.com/ngocjohn/vehicle-status-card/refs/heads/main/assets/sample-images/sample-car-2.png
  - title: sample-car-1.png
    url: >-
      https://raw.githubusercontent.com/ngocjohn/vehicle-status-card/refs/heads/main/assets/sample-images/sample-car-1.png
  images_swipe:
    max_height: 150
    delay: 5000
    max_width: 450
    autoplay: true
    loop: true
    hide_pagination: true
    effect: slide
Clone this wiki locally