/
Slider Block
Slider Block
A carousel/slider powered by Swiper.js. Show one or multiple slides per view with responsive breakpoints, transition effects, autoplay, pagination dots, and navigation arrows. Each slide is a Slider Item Block.
SLIDER PREVIEW
When to use this block
- Testimonial carousels, logo strips, portfolio galleries
- Full-width hero sliders with fade or coverflow effects
- Multi-item carousels (e.g. 3 cards visible, swipe for more)
- Autoplay background content with looping
Slides Per View
Control how many slides are visible at once per breakpoint. Set to 1 for full-width hero slides or 3+ for multi-item carousels.
Slides Per View
Sidebar Panel
≥640px
≥768px
≥1024px
VISUAL COMPARISON
1 slide (hero)
2 slides
3 slides (carousel)
Transition Effects
Choose how slides transition when swiped or auto-advanced.
Slide
Default. Slides move horizontally.
Fade
Cross-fade. Requires 1 slide per view.
Coverflow
3D depth effect with rotation.
Autoplay & Loop
Auto-advance slides on a timer. Loop wraps around to the first slide after the last.
Playback
Sidebar Panel
Autoplay
Delay
ms
Loop
Speed
ms
Center Slides
Parallax
Autoplay + Loop
Slides advance automatically every autoplayDelay ms. With loop enabled, it wraps infinitely. Great for testimonials and logo strips.
Speed
Transition duration in milliseconds. Lower = snappier. Default 500ms.
Center Slides
Active slide is centered with partial prev/next visible on sides. Works best with odd slide counts.
Pagination
Dot indicators or fraction counter below the slider. Customize style, position, and colors.
Pagination
Sidebar Panel
Show
Type
Color
Color
#D1D1D1
Active Color
#171717
PAGINATION TYPES
- Classic Bullets — standard dot row
- Modern Bullets — active dot elongates into a pill
- Dynamic Bullets — nearby dots shrink with distance
- Fraction — numeric “1 / 4” counter
Navigation Arrows
Prev/next arrow buttons. Separate toggles for desktop and mobile visibility. Optionally upload a custom arrow icon.
Navigation
Sidebar Panel
Show Arrows
Show on Mobile
Custom Icon
Mobile arrows
On desktop, arrows appear on hover. On mobile there is no hover, so arrows are always visible when navigationMobile is enabled. Both arrow divs are always rendered — CSS controls visibility per breakpoint.
Slider Gap
Space between slides in pixels. Responsive across breakpoints.
Gap & Width
Sidebar Panel
Values are in raw pixels (not Tailwind scale tokens like other blocks). Scale: 0, 4, 8, 12, 16, 20, 24, 32, 40, 48px.
Background & Width
Optional background color or gradient on the outer wrapper. Control max-width or set to full-width.
Background
Solid color or CSS gradient on the outer wrapper. Gradient overrides color.
Max Width
Tailwind token (sm–7xl, screen-sm–screen-2xl) or full-width toggle. Auto-centered with mx-auto.
Spacing
Padding (top/bottom only, applied to the inner Swiper container) and margin (top/bottom, on the outer wrapper). Responsive.
Responsive:
Mobile
Tablet
Desktop
All Available Controls
Slides Per View sm / md / lg breakpoints
slidesSm (≥640px), slidesMd (≥768px), slidesLg (≥1024px). Number of slides visible at once. Use "1" for full-width hero slides.
Effect slide, fade, coverflow
sliderEffect: "slide" (default), "fade" (cross-dissolve, requires 1 slide per view), "coverflow" (3D depth).
Playback autoplay, loop, speed, center, parallax
autoplay: toggle. autoplayDelay: ms (default 3000). loop: infinite wrap. speed: transition ms (default 500). centerSlides, parallax: toggles.
Pagination bullets, modern, dynamic, fraction + colors
pagination: toggle. paginationType: "bullets", "modernBullets", "dynamicBullets", "fraction". paginationColor/paginationActiveColor: hex. paginationPosition: bottom offset px.
Navigation arrows, mobile toggle, custom icon
navigation: desktop arrows. navigationMobile: mobile arrows. arrowIconUrl/arrowIconId: custom arrow image (next arrow rotated 180°).
Gap & Width slide gap (px), max-width, full-width
gapX/gapXMd/gapXLg: gap in raw px (not Tailwind scale). maxWidth: Tailwind token. isFullWidth: full-width toggle.
Background & Spacing color/gradient, padding, margin
backgroundColor/backgroundGradient. Padding: paddingTop/Bottom (+Md/Lg) on the Swiper container (no left/right). Margin: marginTop/Bottom (+Md/Lg) on the wrapper.