This tutorial demonstrates how to use the Slideshow component to implement a carousel effect that includes both images and videos. After completing this tutorial, you will be able to achieve a carousel display similar to the example shown below.
Difference between Canvas switching and Slideshow component
Canvas | Slideshow |
Allows setting different duration (seconds) for each Canvas screen | Uses a fixed duration for all slides |
Each Canvas screen can include additional components, such as dynamic price lists linked to data or auto-generated discount QR codes | Only supports auto-play of images and videos |
More time-consuming, as you need to create each Canvas screen from scratch | Only requires setting up the Path source to start using |
Can be controlled with event behaviors, e.g., setting an OnPress event to switch slides on click | Only plays automatically according to the set duration |
🕐 Estimated time to complete this tutorial: 3–5 minutes
〈Preparation〉
Prepare carousel and background materials in advance for use in the following steps. We’ve provided material download links below. After downloading, upload BG and Slide 1–5 separately into Media Box.
Step 1: Create the Application and Basic Layout
The following shows the basic layout you’ll create in this step, along with size and color details for quick setup:
Background image: Full size 96 x 54,
BG.jpegCarousel box – SlideBG: 59 x 42, Border Width 1, Background Color
#FFFFFFCarousel Image: 57 x 40,
Slide 1–5.jpeg/mp4
Detailed steps:
Create an application named CanvasSlide.
Add a full-screen Image component and select
BG.jpegfrom the materials.Add a rectangular box for the carousel area, set the border to 1 pixel wide, and the background color to white.
Step 2: Create Variables for Carousel Media Links
Go to the MEDIA tab and click the [i] icon in the upper-right corner of
Slide1.Find the Original File URL link on the right, click it, and copy the URL.
Switch back to APPLICATION, create a new Property BANK variable named
slide1. Select Type = String, and paste the copied URL into the Value field.Repeat steps 1–3 for
Slide2andSlide3, converting each into Property variables.
Step 3: Add and Configure the Slideshow Path
From the right panel in Canvas, click [＋] and add a Slideshow component.
In the Slideshow Properties, click Paths and select [New Item] to create a carousel item.
Choose url, then click [＋]. Next, click the chain icon on the left and select the variable
slide1.Choose mediaType, click [＋], then select photo (based on the type of
slide1).Repeat the process for
slide2andslide3, assigning the correct media type for each.
Step 4: Set Slideshow Timing and Fade Duration
By default, the Slideshow component automatically plays slides every 2 seconds. If you’d like to add fade-in animation or adjust the timing, you can do so under Slideshow Properties:
Countdown: The display time for each slide. Keep the default 2 seconds, or adjust as needed.
Loop: Whether the carousel repeats in a loop (default is Yes).
Fade Duration: The length of the fade-in animation. For this tutorial, set it to 800 ms to match the previous example.
＊For detailed definitions of each property, see the documentation for the Slideshow component.
Step 5: Preview the Effect
After adjusting the properties, click Preview to see the result. The effect should look identical to the carousel you created earlier with Canvas switching, but this method takes only half the time. If you want to quickly build an image or video carousel, the Slideshow component is the way to go!
Congratulations! You have now completed building an auto-play carousel using the Slideshow component.
n the next tutorial, we will demonstrate how to create an auto-updating carousel by combining MediaFlow with the Slideshow component.
Need help? Click the chat icon in the lower-right corner to contact us—we’ll get back to you as soon as possible.