This hero carousel was developed exclusively for the TEVA rebrand initiative.

It is not intended for general use in other projects.
Please do not use this component outside of the TEVA context.

Overview

The Hero Carousel component provides an engaging hero banner with animated orb background effects and slide-based content. It's designed to create dynamic hero sections with smooth transitions and responsive behavior.

API Reference

HeroCarousel

The root container component that manages the animated orb background, slide transitions, and timing controls.

autoplay: boolean - Enable automatic slide progression (default: false)
autoplayDelay: number - Delay between slides in milliseconds (default: 5000)
slideButtonLabel: string - Aria label template for slide buttons (default: "Go to slide %")
prevButtonLabel: string - Aria label for previous button (default: "Previous slide")
nextButtonLabel: string - Aria label for next button (default: "Next slide")
playButtonLabel: string - Aria label for play button (default: "Start autoplay")
pauseButtonLabel: string - Aria label for pause button (default: "Pause autoplay")
slideLabel: string - Aria label template for slides (default: "Slide % of $")
carouselLabel: string - Aria label for carousel region (default: "Carousel")

HeroCarousel.Slide

Individual slide content container with automatic content spacing, typography styling, and slide transition animations.

Basic Usage

The Hero Carousel automatically cycles through slides with smooth transitions and animated orb effects in the background.

We are all in for better health

At Teva, we deliver quality medicines, discover life-changing treatments, and drive scientific innovation.

Innovation at Every Step

From research to development, we're committed to advancing healthcare through cutting-edge science and technology.

Global Impact, Local Care

With a presence in over 60 countries, we bring accessible healthcare solutions to communities worldwide.

<HeroCarousel>
	<HeroCarousel.Slide>
		<h1>We are all in for <em>better health</em></h1>
		<p>
			At Teva, we deliver quality medicines, discover life-changing treatments, and drive scientific innovation.
		</p>
		<Button family="link" variant="3" collapseInline="both" class="group/pointer">
			Learn More <Pointer direction="end" class="text-core-accent h-5 translate-y-0.5" />
		</Button>
	</HeroCarousel.Slide>

	<HeroCarousel.Slide>
		<h1>Innovation at <em>Every Step</em></h1>
		<p>
			From research to development, we're committed to advancing healthcare through cutting-edge science and technology.
		</p>
		<Button family="link" variant="3" collapseInline="both" class="group/pointer">
			Our Science <Pointer direction="end" class="text-core-accent h-5 translate-y-0.5" />
		</Button>
	</HeroCarousel.Slide>
	<HeroCarousel.Slide>
		<h1>Global Impact, <em>Local Care</em></h1>
		<p>
			With a presence in over 60 countries, we bring accessible healthcare solutions to communities worldwide.
		</p>
		<Button family="link" variant="3" collapseInline="both" class="group/pointer">
			Global Reach <Pointer direction="end" class="text-core-accent h-5 translate-y-0.5" />
		</Button>
	</HeroCarousel.Slide>
	<!-- {#each Array.from({ length: slides }) as item, index (index)}
		<HeroCarousel.Slide>
			<h1>Slide {index + 1}</h1>
			<p>
				Content for slide {index + 1}.
			</p>
		</HeroCarousel.Slide>
	{/each} -->
</HeroCarousel>

<!-- <div class="absolute z-[1] top-1 end-1 flex gap-2">
	<div>{slides}</div>
	<Button onclick={() => slides = Math.max(1, slides - 1)} icon pill size="sm">-</Button>
	<Button onclick={() => slides += 1} icon pill size="sm">+</Button>
</div> -->

Multiple Content Types

Slides can contain various content types including multiple paragraphs, different heading structures, and call-to-action elements.

Comprehensive Healthcare Solutions

At Teva, we deliver quality medicines, discover life-changing treatments, and drive scientific innovation.

Our commitment extends beyond pharmaceuticals to include patient support programs and healthcare accessibility initiatives.

Research & Development Excellence

Our state-of-the-art research facilities span multiple continents, bringing together the world's brightest minds in pharmaceutical science.

From breakthrough therapies to biosimilar innovations, we're shaping the future of medicine through dedicated research and strategic partnerships.

Every day, our teams work tirelessly to translate scientific discoveries into meaningful treatments for patients worldwide.

Sustainable Healthcare Future

Environmental responsibility is at the core of our operations, ensuring that our pursuit of better health doesn't compromise the planet's wellbeing.

<HeroCarousel>
	<HeroCarousel.Slide>
		<h1>Comprehensive Healthcare Solutions</h1>
		<p>
			At Teva, we deliver quality medicines, discover life-changing treatments, and drive scientific innovation.
		</p>
		<p>
			Our commitment extends beyond pharmaceuticals to include patient support programs and healthcare accessibility initiatives.
		</p>
		<Button family="link" variant="3" collapseInline="both" class="group/pointer">
			Learn More <Pointer direction="end" class="text-core-accent h-5 translate-y-0.5" />
		</Button>
	</HeroCarousel.Slide>
	<HeroCarousel.Slide>
		<h1>Research & Development Excellence</h1>
		<p>
			Our state-of-the-art research facilities span multiple continents, bringing together the world's brightest minds in pharmaceutical science.
		</p>
		<p>
			From breakthrough therapies to biosimilar innovations, we're shaping the future of medicine through dedicated research and strategic partnerships.
		</p>
		<p>
			Every day, our teams work tirelessly to translate scientific discoveries into meaningful treatments for patients worldwide.
		</p>
	</HeroCarousel.Slide>
	<HeroCarousel.Slide>
		<h1>Sustainable Healthcare Future</h1>
		<p>
			Environmental responsibility is at the core of our operations, ensuring that our pursuit of better health doesn't compromise the planet's wellbeing.
		</p>
		<Button family="link" variant="3" collapseInline="both" class="group/pointer">
			Sustainability <Pointer direction="end" class="text-core-accent h-5 translate-y-0.5" />
		</Button>
	</HeroCarousel.Slide>
</HeroCarousel>

Autoplay Mode

Enable automatic slide progression with customizable timing. The autoplay feature includes pause/play controls and automatically pauses on hover or focus for better accessibility.

Advancing Patient Care

Through innovative research and development, we're creating new pathways to better health outcomes for patients worldwide.

Global Healthcare Access

Making quality medicines accessible and affordable across diverse communities and healthcare systems.

Sustainable Innovation

Developing breakthrough treatments while maintaining our commitment to environmental stewardship and social responsibility.

<HeroCarousel autoplay autoplayDelay={3000}>
	<HeroCarousel.Slide>
		<h1>Advancing Patient Care</h1>
		<p>
			Through innovative research and development, we're creating new pathways to better health outcomes for patients worldwide.
		</p>
		<Button family="link" variant="3" collapseInline="both" class="group/pointer">
			Our Research <Pointer direction="end" class="text-core-accent h-5 translate-y-0.5" />
		</Button>
	</HeroCarousel.Slide>
	<HeroCarousel.Slide>
		<h1>Global Healthcare Access</h1>
		<p>
			Making quality medicines accessible and affordable across diverse communities and healthcare systems.
		</p>
		<Button family="link" variant="3" collapseInline="both" class="group/pointer">
			Global Impact <Pointer direction="end" class="text-core-accent h-5 translate-y-0.5" />
		</Button>
	</HeroCarousel.Slide>
	<HeroCarousel.Slide>
		<h1>Sustainable Innovation</h1>
		<p>
			Developing breakthrough treatments while maintaining our commitment to environmental stewardship and social responsibility.
		</p>
	</HeroCarousel.Slide>
</HeroCarousel>