Carousel

<bh-carousel>

The Carousel component allows you to showcase images and custom content in an interactive slideshow format. It supports various animations, styles, and customization options to fit your design needs.

Features

• Multiple animation types (slide, fade, zoom)
• Various style variants (default, secondary, glass, tricolor)
• Support for both image slides and custom content
• Responsive design with touch support
• Keyboard navigation
• Autoplay with configurable interval
• Customizable indicators and navigation arrows

Basic Usage

Preview

HTML

<bh-carousel
  height="400px"
  autoplay="true"
  interval="5000"
  variant="glass"
  animation="slide">
  <bh-carousel-item
    image="https://images.unsplash.com/photo-1506880018603-83d5b814b5a6"
    alt="Library Interior"
    title="Modern Library"
    caption="A peaceful place for reading and learning">
  </bh-carousel-item>
  <bh-carousel-item
    image="https://images.unsplash.com/photo-1575444174708-fbaf7902e934"
    alt="Study Area"
    title="Study Space"
    caption="Dedicated areas for focused learning">
  </bh-carousel-item>
  <bh-carousel-item
    image="https://images.unsplash.com/photo-1524995997946-a1c2e315a42f"
    alt="Book Collection"
    title="Book Collection"
    caption="Extensive collection of books and resources">
  </bh-carousel-item>
</bh-carousel>

Variants

The carousel component comes with several built-in style variants to match your design needs.

Preview

Default

Secondary

Glass

Tricolor

Animations

Choose from different animation types for slide transitions.

Preview

Slide Animation

Fade Animation

Zoom Animation

Custom Content

You can also use custom content in your carousel slides by using slots.

Preview

📚

New Arrivals

Discover our latest collection of books and digital resources

Browse Collection

👥

Book Club

Join our vibrant community of book lovers and discussions

Join Club

HTML

<bh-carousel height="400px" variant="glass" animation="slide" showIndicators="true" autoplay="true" interval="5000">
  <div slot="slide-0" class="custom-slide">
    <div class="icon">📚</div>
    <h3>New Arrivals</h3>
    <p>Discover our latest collection of books and digital resources</p>
    <button>Browse Collection</button>
  </div>
  <div slot="slide-1" class="custom-slide">
    <div class="icon">👥</div>
    <h3>Book Club</h3>
    <p>Join our vibrant community of book lovers and discussions</p>
    <button>Join Club</button>
  </div>
</bh-carousel>

<style>
  .custom-slide {
    padding: 2rem;
    text-align: center;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
  }

  .custom-slide .icon {
    font-size: 2.5rem;
  }

  .custom-slide button {
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, #3366ff, #2952cc);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
  }
</style>

Responsive Carousel

Create responsive carousels that adapt to different screen sizes.

Preview

Properties

Property	Type	Description
animation	string	Animation type for slide transitions. Options: “slide”, “fade”, “zoom”
autoplay	boolean	Whether to automatically advance slides
borderRadius	string	Border radius of the carousel container
height	string	Height of the carousel
imagesFit	string	Object-fit property for images. Options: “cover”, “contain”, “fill”, “none”, “scale-down”
interval	number	Time in milliseconds between slide transitions when autoplay is enabled
responsive	array	Array of objects with breakpoint and settings for responsive behavior
showArrows	boolean	Whether to show navigation arrows
showIndicators	boolean	Whether to show slide indicators
slides	array	Array of slide objects (alternative to using bh-carousel-item)
slidesToScroll	number	Number of slides to scroll at a time
slidesToShow	number	Number of slides to show at a time
variant	string	Visual style variant. Options: “default”, “secondary”, “glass”, “tricolor”
width	string	Width of the carousel
pauseOnHover	boolean	Whether to pause autoplay when hovering over the carousel
touchEnabled	boolean	Whether to enable touch/swipe navigation
accentColor	string	Custom accent color for indicators and controls

Carousel Item Properties

Property	Type	Description
image	string	URL of the image to display
alt	string	Alt text for the image
title	string	Title to display in the caption
caption	string	Caption text to display
active	boolean	Whether this slide is currently active
imagesFit	string	Object-fit property for this specific image

Events

Event	Description
slide-change	Fired when the active slide changes
autoplay-start	Fired when autoplay starts
autoplay-stop	Fired when autoplay stops