Effects and Transitions

Effects and Transitions

Both widgets support four transition effects via Swiper.js.

Available Effects

Slide (Default)

Standard sliding transition. Slides move horizontally or vertically based on the Direction setting.

• Best for: General purpose, content carousels
• Works with: All pagination types, navigation, loop
• Compatible with: Responsive slides per view

Fade

Crossfade transition between slides. Previous slide fades out while next fades in.

• Best for: Hero banners, image showcases
• Works with: All pagination types, navigation
• Note: Only works with slidesPerView: 1
• Crossfade is enabled by default for smooth blending

Cube

3D cube rotation effect. Slides rotate as if on the faces of a cube.

• Best for: Creative showcases, portfolios
• Settings: Toggle cube shadow on/off
• Note: Only works with slidesPerView: 1

Coverflow

3D coverflow effect with perspective. Slides fan out like a album cover display.

• Best for: Product galleries, portfolio carousels
• Settings: Rotate (0-90), Stretch (0-200), Depth (0-500)
• Works best with: Centered slides enabled

Choosing an Effect

Use Case	Recommended Effect
Content/blog carousel	Slide
Hero banner	Fade
Product showcase	Coverflow
Portfolio/creative	Cube or Coverflow
Testimonials	Slide or Fade
Image gallery	Slide or Coverflow

Performance Notes

• Slide is the fastest effect (GPU-accelerated CSS transforms only)
• Fade and Coverflow add minimal overhead
• Cube is slightly heavier due to 3D transforms and shadows
• All effects use will-change: transform for GPU acceleration
• CSS contain: layout style is applied to the wrapper for rendering optimization