Website elementsMedia & showcase
Card slider
A card slider, built into your site with no plugin and no library. A row of cards (testimonials, team, posts, products) on a real horizontally scrolling track with CSS scroll-snap, so touch and trackpad swiping need no code. Arrows page it, dots follow the page, cards per page are set per breakpoint. Loop and autoplay are off by default; autoplay comes with a pause button.
What our customers say
“They fitted the whole kitchen in four days and left it cleaner than they found it.”
“The quote was the price. No surprises at the end, which is a first for us.”
“Our bathroom finally has a shower that drains. Friendly, tidy and on time.”
“They answered the phone on a Saturday when a pipe burst. That is why we call them first.”
“Good advice about what not to spend money on. We saved more than their fee.”
“Photos every evening of what had been done that day, so we never had to chase.”
“Second project with them and it will not be the last.”
From the blog
You'll need to give us
- What each card shows, if it is not already on your siteSuch as each team member with a photo and a line, or the products to feature.
Send these with your request and we can start straight away. Everything else is ours to do.
Show more reviews, team members or posts than fit across the page, and let visitors swipe or click through them.
Also called
PowerPack Card SliderElementor Testimonial CarouselSlick sliderSwiperOwl carouselpost carouselteam carousel
What it replaces
- PowerPack Card Slider
- Slick/Swiper/Owl embeds
- Elementor Pro carousels
Good for
Testimonials, team members, recent posts, related products: a set of similar cards where seeing three and knowing there are more is enough.
Not for
A hero (that is video-background or particle-field territory), or anything every visitor must see all of: a slider hides most of its cards, so when each card matters a grid is the honest choice.
Accessibility
Written so the page works for every visitor, whether they browse with a mouse, a keyboard or a screen reader, and whether or not they have asked for less motion.
- The track is a region with aria-roledescription="carousel" and the `label` as its name, and it is focusable, so ← → scroll it. Each card is role="group" with aria-roledescription="slide" and “3 of 8” in its name.
- The cards’ own links are ordinary tab stops; focusing one scrolls its whole card into view. Arrows and dots are real buttons with names (“Previous”, “Page 2 of 3”); the current dot has aria-current and a longer shape, not only a color. No aria-live: nothing is announced on its own.
- Swiping, trackpad and scroll-wheel are the browser’s own scrolling. Paging is smooth, and instant under prefers-reduced-motion.
- Autoplay (off by default) has a visible pause button, WCAG 2.2.2, named for what it will do. It waits while hovered, while focus is inside, while the tab is hidden and while off screen, and a swipe restarts its countdown. Under prefers-reduced-motion (tracked live) it never starts and the button is not shown.
- Without JavaScript the track scrolls by hand with its scrollbar visible; arrows, dots and the pause button are absent.
Where it's live
- superherotech.ai: /elements/card-slider/ (demo)
How to ask for it
“The card-slider on our home page, with …”
Name it, say which page and which part of the page it goes on, and say what goes in it: your photos, your words, your colors. That is a complete request. We build it, you approve it, and it goes live. If you know it by another name, from WordPress or from another site, that works too.
More elements you can ask for: Before / After, Particle field, Mega menu, Video background, Parallax band, Scroll reveal, Business hours, News ticker, Flip box, Instagram feed, Accordion / FAQ, Tabs, Info list, Video player, Testimonial carousel, Icon library, Animated text, Cookie consent, Animated background, Modal box, Announcement bar, Image hotspots, Info circle, Slide box, Countdown, Content toggle, Off-canvas panel, Video gallery, Map and directions, Link effects, Tabcordion, Tooltip, Responsive table, Notice, Toast, Loading, Menu button, Radio group, Stepper, Tags, Scrollbox, Sticker. Or see all of them working.
More in Media & showcase
See them all working- Video player
Your video, your thumbnail, and nothing loads from YouTube until someone presses play.
- Testimonial carousel
Let what your clients say move gently across the page, without anyone losing a quote halfway through reading it.
- Icon library
Find the icon, copy its name, put it in a request — it arrives as one crisp inline SVG, not a 300 KB font.
- Video gallery
All your videos on one page, sorted by topic, with your own thumbnails, and nothing loads from YouTube until someone picks one.
Want the card slider on your site?
Tell us about the business. We build the site with it, launch it, and change it whenever you ask.