Bebell Services Carousel

A responsive, auto-scrolling carousel to showcase Bebell services. Designed for easy embedding via iframe.

)

Features

• 🚀 Auto-scrolling animation (40s loop)
• 📱 Mobile-friendly responsive design
• 🎨 Fade-edge effect for seamless looping
• 🔗 Clickable CTAs with hover effects

How to Embed

Paste this iframe code where you want the carousel to appear:

<iframe 
  src="https://[your-username].github.io/bebell-services-carousel/" 
  width="100%" 
  height="600" 
  frameborder="0"
  style="border: none;"
></iframe>

Customization

Edit these CSS variables in index.html to tweak the design:

.bebell-carousel {
  --item-width: 290px;    /* Card width */
  --item-gap: 1.5rem;     /* Space between cards */
  --animation-duration: 40s; /* Scroll speed */
}

Hosted Demo

👉 Live Preview

How It Works

1. Duplicate cards create seamless looping
2. CSS animations handle the scrolling
3. Gradient masks hide the entry/exit points

Need Help?

• Report issues here
• Want more services added? Edit index.html