Swiper
Use App Connect Swiper for curated sequences where navigation, pagination, autoplay, and responsive slide counts all support one deliberate story.
Introduction
The preview below shows the result first: one curated sequence, visible navigation, and a controlled next step instead of free browsing.
Use Swiper when the content benefits from an intentional sequence
This section is not trying to show many records at once. It is built to walk the user through a short sequence of featured messages. That is the practical use case for Swiper inside Wappler: a curated stream where next, previous, pagination, and autoplay all help the user stay oriented instead of getting in the way.
The slideshow section becomes the component parent
Swiper is a real component, so the surrounding section is chosen first. This showcase section is the honest parent because the slider belongs to the whole curated story block, not to a tiny inner fragment.
The matching Structure row stays ready for insertion
After the slideshow section is chosen in Design View, the matching Structure row is the place where the inline insert action appears.
The inline plus action opens the component picker
The selected row now opens its inline Insert Inside picker. This is the quicker path for adding a real component than the old context-menu flow.
The picker narrows to Swiper
The inline picker search narrows the list to Swiper without leaving the current insertion flow.
Swiper is the page-level sequencing component
This picker entry is the real component that owns the slideshow sequence. Once it exists, the main browsing controls live on the Swiper itself and the slide content stays focused on the message.
The picker closes and the slider returns to focus
The inline picker closes now so the next steps can inspect the existing slider on the page and move deeper into its main controls and responsive behavior.
Working in Wappler
Once the Swiper is selected, the important decisions are the overall browsing model and the breakpoint behavior that keeps the sequence readable on smaller screens.
The main Swiper component owns navigation, pagination, autoplay, and loop
When the Swiper itself is selected, the Properties panel exposes the controls that define the overall browsing model: effect, slide delay, Auto Play, Loop, Pagination, Navigation, Per View, Per Group, and Parallax. This is where you decide how much chrome and motion the slider should own before you start styling individual slides.
Responsive slide settings live on the component, not as an afterthought
The Swiper component includes breakpoint-specific controls for Space Between, Per View, and Per Group. Use those responsive settings to reduce simultaneous slides and spacing on smaller screens before you reach for custom CSS, so the sequence still reads clearly on every device.
Slide content can add restrained parallax without hiding the message
Inside each slide, this content block is configured for restrained parallax movement so the caption layer travels at a slightly different rate from the background. The important rule is restraint: use slide-level motion only when it helps the sequence feel layered, and keep it light enough that users still read the message immediately.
Conclusion
You now have the concrete Swiper workflow in Wappler: use the component for short curated sequences, set the main browsing controls on the Swiper itself, and tune breakpoint behavior before adding decorative motion inside the slides.
Continue into adjacent media decisions
Continue into Lightbox when users need free browsing instead of a fixed sequence, or return to the media hub to choose the next media component workflow.
