---
title: "Swiper Carousel | FramerHub"
canonical_url: "https://framerhub.io/components/swiper-carousel"
last_updated: "2026-06-15T14:46:28.755Z"
meta:
  description: "The ultimate carousel component with stunning effects and total control. Premium Framer component for client sites, portfolios, and product pages."
  "og:description": "The ultimate carousel component with stunning effects and total control. Premium Framer component for client sites, portfolios, and product pages."
  "og:title": "Swiper Carousel | FramerHub"
---

# **Swiper Carousel **

The ultimate carousel component with stunning effects and total control.

One-time payment

Lifetime updates

Commercial license

## **Overview** The ultimate carousel component with stunning effects and total control. - 5 transition effects (Slide, Fade, Coverflow, Flip, Cards) - Autoplay with pause-on-hover - Navigation arrows, pagination bullets, and scrollbar - Keyboard and mousewheel navigation - Free mode and loop capabilities - Fully customizable styling ## The Ultimate Carousel for Framer Transform your Framer projects with the most powerful carousel component available. Powered by Swiper.js, this component gives designers complete control over every aspect of their carousel – no code required. ## Features**5 Stunning Effects** Choose from Slide, Fade, Coverflow, Flip, or Cards effects. Each effect comes with its own customization options to perfect the look.**Complete Navigation Control** Add navigation arrows, pagination bullets (or fraction/progress bar), and scrollbar. Customize colors and sizes to match your design.**Smart Autoplay** Set your carousel to auto-advance with customizable timing. Pause on hover keeps users in control.**Multiple Interaction Modes** Enable keyboard navigation, mousewheel scrolling, and touch/drag functionality.**Slot-Based Content** Connect any frame or component to the carousel slots for total design flexibility. Support for multiple slides per view and custom gap settings.![swiper Caroisel](https://framerhub.io/framerhub/img/components/control/swiper-carousel.jpg) ## Use Cases**Hero Sections** — Create eye-catching homepage heroes with the Fade or Slide effects.**Product Galleries** — Showcase products with the Coverflow effect for that premium feel.**Testimonials** — Display customer reviews with the elegant Fade effect.**Portfolio** — Show off your work with the playful Cards effect.**Image Galleries** — Full-screen image viewing with customizable transitions.**Slides**- Connect your frames to the Slide Content slot - Add/remove slides by adding/removing frames from the connection**Layout**- Direction: Horizontal or Vertical scrolling - Slides Per View: Show multiple slides at once - Gap: Space between slides - Center Slides: Center the active slide**Effects**- Slide: Classic sliding transition - Fade: Smooth crossfade between slides - Coverflow: Album cover-style effect - Flip: 3D card flip - Cards: Stacked cards effect**Navigation**- Show/hide navigation arrows - Customize arrow color, size, background, and hover effects - Support for custom SVG or image arrows**Pagination**- Bullets: Clickable dots - Fraction: Shows "1 / 4" style - Progress Bar: Animated progress line - None: Hide pagination**Autoplay**- Enable/disable auto-advance - Set delay between slides - Pause when mouse hovers - Reverse direction option**Behavior**- Loop: Infinite scrolling - Transition Speed: Control animation duration - Free Mode: Slides move freely without snapping - Rewind: Jump back to first slide at the end (when loop is off)**Interaction**- Touch/Drag: Enable or disable swiping - Keyboard: Use arrow keys to navigate - Mousewheel: Scroll to change slides - Grab Cursor: Visually indicate draggable state**Styling**- Slide Radius: Round slide corners (px) - Full control over pagination and scrollbar colors ### Quick Tips**Tip 1** — For the best Coverflow effect, set "Slides Per View" to 3 and enable "Center Slides".**Tip 2** — Use the Cards effect with 1 slide per view for a stack of overlapping cards.**Tip 3** — Enable "Free Mode" with "Sticky" for a satisfying snap-to-slide behavior while dragging.**Tip 4** — Set "Transition Speed" to 800-1000ms for a more cinematic, smooth feeling. ## License**Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client. ## Why Designers Love This This isn't just another carousel – it's THE carousel. With 5 powerful effects, complete navigation options, and pixel-perfect customization, you'll never need another slider component. Every control is designed with designers in mind: no code, no confusion, just beautiful results. ---**Need Help?** Visit framerhub.io/support for documentation and video tutorials. ### **Swiper Carousel - $18** The ultimate carousel component with stunning effects and total control.**One-Time Payment****Lifetime Access****Unlimited sites**### **You might also like** Why Choose Framer Hub Components ## **Loved by Framer teams** Used by Framer professionals who need premium, no-code experiences. Got questions? We've the answers ## **Got questions? We've the answers ** Everything you need to know about FramerHub.