Breakpoint control
Slides, gaps, height, and offsets can all shift per screen size. Set site-wide breakpoints once, override per slider.
Built for Etch page builder · Powered by Splide
Every part of your slider
is now its own component.
The track, the arrows, the dots, the thumbnails, the progress bar — drop them in, configure them visually, and ship production-grade carousels without fighting a black box.
One-time purchase · Instant download · Docs included · Launch price — first 100 copies only
This carousel is running live on this page — built the way Slider Pro builds them
● Live demo — continuous auto-scroll, exactly like Slider Pro's logo marquee mode
Most slider plugins
A black box.
- One giant widget you can't take apart
- A wall of settings for every tiny change
-
CSS you have to fight with
!important - A template that dictates your layout
Etch Slider Pro
Real components.
- Every visible piece is a reusable Etch component
- Configure each piece in its own settings panel
- Style everything with CSS variables — on-brand by default
- Arrange the pieces however your design demands
Build by combining. Style with variables. Preview as you go.
The system
Seven components.
Infinite sliders.
Drop in the pieces you need, configure each one visually, and place them anywhere inside the wrapper — controls find their slider automatically.
Wrapper
The stage. Everything inside connects on its own.
Slider
The track — transitions, direction, autoplay, breakpoints.
Slide
Any content. Active/inactive styling per slide.
Pagination
Dots or thumbnails, styled your way.
Nav Buttons
Arrows that live anywhere in the layout.
Play / Pause
Polite autoplay control — keyboard-friendly too.
Progress
Bar, circular ring, or numbered counter.
Your layout
Two arrows in a corner, counter below? Place them there.
Proof, not promises
See it actually work.
Every slider on this page is running live, right now — the same patterns Slider Pro builds inside Etch. Drag them, click them, resize the window.
Live demo · Thumbnail sync
Thumbnail sync that just works.
Pair a main slider with a thumbnail strip and they stay in sync automatically. Click any thumbnail below — the main view follows. Need them in different parts of the page? Group them via Sync Group and one main slider can even drive several thumbnail strips at once.
"Choose your transition — slide, fade, or loop — and go vertical or right-to-left when you need to."
Transitions & motion
"Give active and inactive slides their own look — opacity, scale, position, borders, and radius — for depth and focus."
Per-slide styling
"Sliders below the fold wait to load until people scroll near them — performance you get for free."
Fast by default
"Autoplay pauses on hover — and pauses politely for keyboard users too."
Accessible autoplay
01 / 04
Live demo · Fade + counter
Fade transitions, numbered progress.
This one uses a fade transition with a numbered counter — the classic testimonial pattern. The quotes? Straight from the product itself. Hover to pause; the dots are clickable.
Live demo · Layout Mode
Carousel on mobile. Grid on desktop. Live.
Resize this window: below the breakpoint these cards are a swipeable carousel; at desktop width they snap into a plain, fully CSS-controlled grid. In Slider Pro you set it with desktop-first shorthand:
slides: 3 md:2 sm:1
Grid mode
Fluid values
Prefer smooth scaling over stepping? Fluid values resize gracefully with the viewport instead of jumping.
Layout Mode
Become a plain CSS grid at the breakpoints you choose — no hacks, your styling stays in charge.
Auto-connect controls
Arrows, dots, play/pause — put them anywhere inside the wrapper and they find their slider on their own.
CSS variables
Style once, stay consistent. Styling one slider never disturbs another.
Lazy by default
Below-the-fold sliders wait until people scroll near them. Long pages stay quick and light.
Made for Etch — not bolted on
Build and preview right inside the editor.
See exactly how your slider responds at any screen size, rely on full undo/redo the whole way, and configure every component in its own settings panel. What you build is what you ship.
Battle-tested engine
Splide under the hood. You choose how it loads.
Keep the engine bundled with your site for zero external requests, or load it from a fast CDN — your call, set in one place. Either way it's version-locked, dependable, and ready for real projects: heroes, galleries, testimonials, logo strips, and card rows alike.
Why Splide
A deliberate engine choice.
In independent 2026 comparisons of the leading carousel libraries, Splide leads on what actually matters on a live website.
Accessible by default
WCAG 2.1 AA out of the box — ARIA roles, screen-reader announcements, focus management, and full keyboard navigation, with no extra work.
Feather-light
Roughly 27 KB gzipped with zero dependencies, so a slider barely adds to your page weight.
The right balance
Between Embla's bare minimum and Swiper's sprawl — a focused core that still covers fade, vertical, loop, autoplay, thumbnails, and breakpoints.
Stable & proven
A mature library with a settled API that isn't chasing breaking changes, so your sliders keep behaving exactly as built.
Ready-made recipes Coming soon
Designed for the sliders you actually build.
Start from a pattern, make it yours — recipes ship in an upcoming update.
Hero banners
Full-width, autoplay, overlaid text that stays readable.
Product galleries
A main image with a synced thumbnail strip.
Testimonials
Clean fade transitions with progress and dots.
Logo marquees
Continuous, hands-off auto-scroll.
Responsive card rows
Three across on desktop, one on mobile.
Carousel-to-grid
Swipe on phones, static grid on larger screens.
Stop fighting your slider component.
Seven components, one battle-tested engine, and sliders that finally feel like part of your build — not a widget dropped on top of it.
One-time purchase · Documentation & support included