Power Plus - Renderer Slider (Carousel)

The Slider Renderer displays items in a carousel/slider powered by Swiper, one of the most popular touch-enabled slider libraries. Visitors can swipe, click navigation arrows, use keyboard arrow keys, or let the slider advance automatically. The slider supports all the visual features of the Block renderer (hover overlays, 3D effects, touch buttons) while adding smooth transitions, loop behavior, and touch/swipe gestures.

The Slider renderer is ideal for showcasing content in a focused, one-at-a-time format: product showcases, testimonial rotators, partner logo carousels, image galleries, and featured content spotlights. It works especially well when you have a moderate number of items (5–30) that benefit from individual attention rather than being presented all at once in a grid.

Configuration

Fields (Repeating Group)

Slide fields work identically to the Block Renderer — each field defines a piece of data displayed on each slide.

Slider Settings

These settings control the slider’s behavior — how it transitions, whether it loops, how many slides are visible, and what navigation controls are shown.

Visual Style

Advanced

Examples

Product Showcase Carousel

A three-slide product carousel with autoplay and navigation:

Renderer Module:
  Name: product_slider
  Loop: true
  Items Per View: 3
  Transition Mode: autoplay
  Autoplay Time: 4000
  Transition Effect: slide
  Navigation Arrows: true
  Navigation Bullets: true
  Spacing: 20
  Fields:
    - Name: image
      Display: image
      Value: [[ object.values.image.url ]]
      Alt Text: [[ object.values.name ]]
    - Name: title
      Display: text
      Content: <h4>[[object.values.name]]</h4>
    - Name: price
      Display: text
      Content: [[ $formatNumber(object.values.price, "#,##0.00") ]]€
  Link: [[object.values.link]]

This shows three products at a time, advances automatically every 4 seconds, and loops infinitely. The visitor can also click arrows or swipe to navigate manually.

Continuous Logo Carousel

A smooth, non-stop scrolling logo strip — commonly used for “Our Clients” or “Trusted By” sections:

Renderer Module:
  Name: logo_slider
  Loop: true
  Items Per View: 5
  Transition Mode: continuous
  Continuous Time: 3000
  Navigation Arrows: false
  Navigation Bullets: false
  Grab Cursor: false
  Keyboard Control: false
  Fields:
    - Name: logo
      Display: image
      Value: [[ object.values.logo.url ]]
      Alt Text: [[ object.values.company_name ]]

No navigation controls are shown because the slider scrolls continuously. The visitor doesn’t need to interact — the logos stream past endlessly. Setting Grab Cursor: false removes the grab cursor since the user isn’t expected to drag.

Testimonial Slider with Fade Effect

A single-slide testimonial rotator that fades between quotes:

Renderer Module:
  Name: testimonial_slider
  Loop: true
  Items Per View: 1
  Transition Mode: autoplay
  Autoplay Time: 6000
  Transition Effect: fade
  Navigation Bullets: true
  Navigation Arrows: false
  Fields:
    - Name: quote
      Display: text
      Content: <blockquote>[[object.values.quote]]</blockquote>
    - Name: author
      Display: text
      Content: <cite>— [[object.values.author]], [[object.values.company]]</cite>
    - Name: avatar
      Display: image
      Value: [[ object.values.photo.url ]]
      Alt Text: [[ object.values.author ]]

The fade effect crossfades between slides instead of sliding horizontally. This works best with Items Per View: 1 because crossfading multiple slides at once looks visually confusing. The 6-second autoplay gives visitors time to read each testimonial.

Image Gallery with Coverflow

A 3D coverflow effect for a photo gallery:

Renderer Module:
  Name: gallery_slider
  Loop: true
  Items Per View: 3
  Transition Mode: manual
  Transition Effect: coverflow
  Navigation Arrows: true
  Navigation Bullets: false
  Spacing: 10
  Fields:
    - Name: photo
      Display: image
      Value: [[ object.values.image.url ]]
      Alt Text: [[ object.values.caption ]]
    - Name: caption
      Display: text
      Content: <p>[[object.values.caption]]</p>

The coverflow effect shows the active slide at full size in the center, with adjacent slides angled in 3D perspective — similar to the classic iTunes album browser.

Transition Effects

Responsive Behavior

The slider automatically reduces the number of visible slides on smaller screens. The Items Per View setting defines the maximum for desktop. The Swiper library calculates appropriate breakpoints:

• Desktop (> 1024px): Full Items Per View count

• Tablet (768–1024px): Typically Items Per View - 1 or 2

• Mobile (< 768px): Typically 1

For example, a slider with Items Per View: 5 shows 5 logos on desktop, 3 on tablet, and 1 on mobile.

Combining with Filters

The slider works with the same datasource and control modules as any other renderer. When a filter is applied, the slider updates to show only matching items. This creates interactive, filterable showcases:

Datasource: HubDB (testimonials table)
Renderer:   Slider (testimonial_slider)
Filter:     Service Type (data-schema tabs)
List:       testimonial_list

When the visitor selects "Cloud Services" in the filter,
the slider shows only testimonials from cloud service customers.

This pattern is especially powerful for curated content: let visitors choose a category, and the slider updates to show only relevant items.