01
Morphing Pill
The active dot stretches into a gradient pill and glides between slides, so one liquid indicator marks the current position.
// FREE TOOLSView all →
◈Keyword ResearchFreeReal Google + Bing suggestions, grouped by intent.
▣Meta & SERP PreviewsoonSee how your page looks in Google, fix title & description.
◐AI Visibility ChecksoonWhat AI assistants say about your brand.
❖Schema GeneratorsoonCopy-paste JSON-LD for FAQ, Article, Product & more.
// SWIPE DOTS
Carousel dots that move with style
Five animated pagination indicators for carousels and sliders, morphing pill, liquid worm, auto-progress, elastic bounce and a glow trail. Click through each, then copy the code.
Why your pagination dots matter
Carousel dots are tiny, but they're on nearly every hero, testimonial slider and onboarding flow. A smooth, well-animated indicator makes navigation feel effortless and shows the user exactly where they are. Each design below stays accessible with real buttons and clear active state, so it looks great and works for everyone.
02
Liquid Worm
A gooey blob merges the dots; the active one bulges and the liquid flows toward it, using an SVG goo filter.
03
Auto-Progress Ring
The active dot fills a progress ring, and when it completes it auto-advances to the next slide, like an auto-playing carousel.
04
Elastic Bounce
The active dot springs up with an elastic bounce and a soft shadow tracks under it, like a bouncing ball moving between slides.
05
Glow Trail
A single glowing indicator slides between dot slots, leaving a brief light trail behind it. The glow is the star.
Frequently asked questions
Are these carousel dots free to use?+
Yes. Copy the code under any design into your own projects, including commercial ones.
Do they work with any slider?+
Yes. They're just an active-index indicator, so wire the active state to whatever carousel or swiper you use, or drive your slider from them.
Are they accessible?+
Each dot is a real button with an aria-label naming the slide, so they're keyboard-focusable and announced by screen readers.
Do they need any libraries?+
No. Every design is React plus Tailwind (a couple use inline SVG) with no external dependencies.
Can I drive my slider from the dots?+
Yes. The dots hold the active index, so you can either sync it from your carousel (Swiper, Embla, or your own) or make the dots the source of truth and move your slider when the active index changes.
Need a custom UI for your product?
Smooth, considered details like these go into every project I build. Built by Saurabh Bhayana, web developer and SEO specialist.
Let's talk →