Aware Controls | JavaScript (ES5) Carousel Demos

The Carousel control serves as a slide show for displaying images and content.

Default Behavior

Demonstrates the default behavior of the Carousel control.

new ac.navigations.Carousel(
	{
		cssClass: "default-carousel",
		items: [
			{
				template:
					'<figure class="img-container"><img src="/assets/imgs/carousel/fox.webp" alt="Fox" style="height:100%; width:100%" /><figcaption class="img-caption">Fox</figcaption></figure>'
			},
			{
				template:
					'<figure class="img-container"><img src="/assets/imgs/carousel/polar_bear.webp" alt="Polar Bear" style="height:100%; width:100%" /><figcaption class="img-caption">Polar Bear</figcaption></figure>'
			},
			{
				template:
					'<figure class="img-container"><img src="/assets/imgs/carousel/snow_hare.webp" alt="Snow Hare" style="height:100%; width:100%" /><figcaption class="img-caption">Snow Hare</figcaption></figure>'
			},
			{
				template:
					'<figure class="img-container"><img src="/assets/imgs/carousel/penguin.webp" alt="Penguin" style="height:100%; width:100%" /><figcaption class="img-caption">Penguin</figcaption></figure>'
			},
			{
				template:
					'<figure class="img-container"><img src="/assets/imgs/carousel/polar_bear_twins.webp" alt="Polar Bear Cubs" style="height:100%; width:100%" /><figcaption class="img-caption">Polar Bear Cubs</figcaption></figure>'
			}
		]
	},
	"#cntlDefaultCarousel"
);

<div style="width: 100%; height: 400px">
	<div id="cntlDefaultCarousel"></div>
</div>

.default-carousel .a-carousel-items .a-carousel-item .img-container {
	height: 100%;
	margin: 0 0 1rem;
}

.default-carousel .a-carousel-items .a-carousel-item .img-caption {
	bottom: 5em;
	color: #000;
	font-size: 13pt;
	font-weight: 600;
	text-align: center;
	width: 100%;
	height: 2em;
	position: relative;
	padding: 0.3em 1em;
}

Partially Visible

Demonstrates having images in the carousel partially visible.

new ac.navigations.Carousel(
	{
		cssClass: "partially-carousel",
		partialVisible: true,
		items: [
			{
				template:
					'<figure class="img-container"><img src="/assets/imgs/carousel/leopard.webp" alt="Leopard" style="height:100%; width:100%" /><figcaption class="img-caption">Leopard</figcaption></figure>'
			},
			{
				template:
					'<figure class="img-container"><img src="/assets/imgs/carousel/cheetah.webp" alt="Cheetah" style="height:100%; width:100%" /><figcaption class="img-caption">Cheetah</figcaption></figure>'
			},
			{
				template:
					'<figure class="img-container"><img src="/assets/imgs/carousel/lion.webp" alt="Lion" style="height:100%; width:100%" /><figcaption class="img-caption">Lion</figcaption></figure>'
			},
			{
				template:
					'<figure class="img-container"><img src="/assets/imgs/carousel/tiger.webp" alt="Tiger" style="height:100%; width:100%" /><figcaption class="img-caption">Tiger</figcaption></figure>'
			},
			{
				template:
					'<figure class="img-container"><img src="/assets/imgs/carousel/puma.webp" alt="Puma" style="height:100%; width:100%" /><figcaption class="img-caption">Puma</figcaption></figure>'
			}
		]
	},
	"#cntlDefaultCarousel"
);

<div style="width: 100%; height: 400px">
	<div id="cntlPartiallyCarousel"></div>
</div>

.partially-carousel .a-carousel-items .a-carousel-item .img-container {
	height: 100%;
	margin: 0 12px;
}

.partially-carousel .a-carousel-items .a-carousel-item .img-caption {
	bottom: 5em;
	color: #fff;
	font-size: 13pt;
	font-weight: 600;
	text-align: center;
	width: 100%;
	height: 2em;
	position: relative;
	padding: 0.3em 1em;
}