# Carousel Carousel is a horizontally scrollable layout that displays a series of items. It shows a collection of carousel items that can be scrolled on and off the screen. It may come with controls (e.g. arrows or buttons) allowing the user to manually scroll through. Carousel UI elements are commonly seen in the following design patterns: Image gallery, Onboarding screens, Product catalogs. **Category:** Components **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-carousel--introduction ## Variants documented in Storybook - Default Carousel: https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-carousel--default-carousel - Carousel With Images: https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-carousel--carousel-with-images ## Framework setup ### HTML / CDN ```html ``` ### React ```bash npm install ux4g-web-components ``` ```jsx import 'ux4g-web-components/styles.css'; import 'ux4g-web-components/design-system'; ``` ### Angular Update `angular.json`: ```json { "styles": [ "node_modules/ux4g-web-components/styles/ux4g.css", "src/styles.css" ], "scripts": [ "node_modules/ux4g-web-components/dist/runtime/design-system.js" ] } ``` ## Code examples The snippets below are extracted from the Storybook canvas for Carousel. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. Carousel With Images — Image Example HTML: ```html
Mountain sunset landscape

Scenic Mountains

Experience the serenity of nature at dusk.

City skyline at night

Urban Nightlife

The vibrant pulse of the city after dark.

Lush green forest

Deep Forest

Breathe in the freshness of the ancient woods.

Abstract geometric background

Abstract Art

Modern geometric shapes and soft colors.

``` React: ```jsx import React from 'react'; const CarouselExample1Demo = () => ( <> {/* Variant: Carousel - Image Example */}
Mountain sunset landscape

Scenic Mountains

Experience the serenity of nature at dusk.

City skyline at night

Urban Nightlife

The vibrant pulse of the city after dark.

Lush green forest

Deep Forest

Breathe in the freshness of the ancient woods.

Abstract geometric background

Abstract Art

Modern geometric shapes and soft colors.

); export default CarouselExample1Demo; ``` Angular: ```html
Mountain sunset landscape

Scenic Mountains

Experience the serenity of nature at dusk.

City skyline at night

Urban Nightlife

The vibrant pulse of the city after dark.

Lush green forest

Deep Forest

Breathe in the freshness of the ancient woods.

Abstract geometric background

Abstract Art

Modern geometric shapes and soft colors.

``` ### 2. Default Carousel — Default Example HTML: ```html

Slide 1

(Replace with desired banner content)

Slide 2

(Replace with desired banner content)

Slide 3

(Replace with desired banner content)

Slide 4

(Replace with desired banner content)

``` React: ```jsx import React from 'react'; const CarouselExample2Demo = () => ( <> {/* Variant: Carousel - default Example */}

Slide 1

(Replace with desired banner content)

Slide 2

(Replace with desired banner content)

Slide 3

(Replace with desired banner content)

Slide 4

(Replace with desired banner content)

); export default CarouselExample2Demo; ``` Angular: ```html

Slide 1

(Replace with desired banner content)

Slide 2

(Replace with desired banner content)

Slide 3

(Replace with desired banner content)

Slide 4

(Replace with desired banner content)

``` ### 3. Introduction — Introduction HTML: ```html ``` React: ```jsx import React from 'react'; const CarouselExample3Demo = () => ( <> ); export default CarouselExample3Demo; ``` Angular: ```html ``` ## Accessibility notes - Use semantic HTML and required ARIA attributes where the Storybook example shows them. - Ensure visible focus indicators and keyboard operability. - Test color contrast against WCAG 2.1 AA.