Carousel

<bh-carousel> | BharatCarousel

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.

Basic Usage

Preview

HTML

<bh-carousel
  height="400px"
  autoplay="true"
  interval="5000"
  variant="secondary"
  animation="slide">
  <bh-carousel-item
    image="<add image url>"
    alt="Library Interior"
    title="Modern Library"
    caption="A peaceful place for reading and learning">
  </bh-carousel-item>
  <bh-carousel-item
    image="<add image url>"
    alt="Study Area"
    title="Study Space"
    caption="Dedicated areas for focused learning">
  </bh-carousel-item>
  <bh-carousel-item
    image="<add image url>"
    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

HTML

<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem;">
  <div>
    <h4>Default</h4>
    <bh-carousel height="200px" variant="default" animation="slide">
      <bh-carousel-item
        image="<add image url>"
        alt="Default"
        title="Default Variant">
      </bh-carousel-item>
    </bh-carousel>
  </div>
  <div>
    <h4>Secondary</h4>
    <bh-carousel height="200px" variant="secondary" animation="slide">
      <bh-carousel-item
        image="<add image url>"
        alt="Secondary"
        title="Secondary Variant">
      </bh-carousel-item>
    </bh-carousel>
  </div>
  <div>
    <h4>Glass</h4>
    <bh-carousel height="200px" variant="glass" animation="slide">
      <bh-carousel-item
        image="<add image url>"
        alt="Glass"
        title="Glass Variant">
      </bh-carousel-item>
    </bh-carousel>
  </div>
  <div>
    <h4>Tricolor</h4>
    <bh-carousel height="200px" variant="tricolor" animation="slide">
      <bh-carousel-item
        image="<add image url>"
        alt="Tricolor"
        title="Tricolor Variant">
      </bh-carousel-item>
    </bh-carousel>
  </div>
</div>

Animations

Choose from different animation types for slide transitions.

Preview

Slide Animation

Fade Animation

Zoom Animation

HTML

<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem;">
  <div>
    <h4>Slide Animation</h4>
    <bh-carousel height="200px" variant="glass" animation="slide" autoplay="true" interval="4000">
      <bh-carousel-item
        image="<add image url>"
        alt="Slide"
        title="Slide Animation">
      </bh-carousel-item>
      <bh-carousel-item
        image="<add image url>"
        alt="Slide"
        title="Slide Animation">
      </bh-carousel-item>
    </bh-carousel>
  </div>
  <div>
    <h4>Fade Animation</h4>
    <bh-carousel height="200px" variant="glass" animation="fade" autoplay="true" interval="4000">
      <bh-carousel-item
        image="<add image url>"
        alt="Fade"
        title="Fade Animation">
      </bh-carousel-item>
      <bh-carousel-item
        image="<add image url>"
        alt="Fade"
        title="Fade Animation">
      </bh-carousel-item>
    </bh-carousel>
  </div>
  <div>
    <h4>Zoom Animation</h4>
    <bh-carousel height="200px" variant="glass" animation="zoom" autoplay="true" interval="4000">
      <bh-carousel-item
        image="<add image url>"
        alt="Zoom"
        title="Zoom Animation">
      </bh-carousel-item>
      <bh-carousel-item
        image="<add image url>"
        alt="Zoom"
        title="Zoom Animation">
      </bh-carousel-item>
    </bh-carousel>
  </div>
</div>

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="secondary" 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

HTML

<bh-carousel
  height="300px"
  autoplay="true"
  responsive='[
    {"breakpoint": 1024, "settings": {"slidesToShow": 2}},
    {"breakpoint": 600, "settings": {"slidesToShow": 1}}
  ]'>
  <bh-carousel-item
    image="<add image url>"
    alt="Image 1"
    title="Slide 1">
  </bh-carousel-item>
  <bh-carousel-item
    image="<add image url>"
    alt="Image 2"
    title="Slide 2">
  </bh-carousel-item>
  <bh-carousel-item
    image="<add image url>"
    alt="Image 3"
    title="Slide 3">
  </bh-carousel-item>
  <bh-carousel-item
    image="<add image url>"
    alt="Image 4"
    title="Slide 4">
  </bh-carousel-item>
</bh-carousel>

Properties

<bh-carousel> | BharatCarousel

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

<bh-carousel-item> | BharatCarouselItem

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