Carousel
A carousel is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. Cards support a wide variety of content, including images, text, list groups, links, and more.
Card Carousel
HTML
<div class="container">
<div class="row">
<div class="col-5 p-0">
<h2>Courses</h2>
</div>
<div class="col-7 p-0">
<p class="text-right mt-2 view-course"><a href="#">View all courses <span><i class="aha-icon-arrow-right"></i></span></a></p>
</div>
</div>
<div id="carousel-slider" class="carousel slide">
<div id= "carousel-container" class="carousel-inner row p-0 m-0">
<div class="carousel-item carousel-column col-12 col-sm-6 col-md-4 col-lg-3 active d-lg-block mt-lg-4 ci">
<a href="https://www.heart.org/" target="_blank" aria-label="ACLS" class="d-block">
<img src="https://stg-shopcpr.laerdalblr.in/pub/media/wysiwyg/wysiwyg/homepage-heart_600x400.jpg" class="img-fluid d-block" alt="image"/>
<p class="carousel-caption font-600">
ACLS
</p>
</a>
</div>
<div class="carousel-item carousel-column col-12 col-sm-6 col-md-4 col-lg-3 d-lg-block mt-lg-4 ci">
<a aria-label="basic life support" href="https://www.heart.org/" target="_blank" class="d-block"><img src="https://stg-shopcpr.laerdalblr.in/pub/media/wysiwyg/wysiwyg/homepage-heart_600x400.jpg" class="img-fluid d-block" alt="image"/>
<p class="carousel-caption font-600">
BLS
</p>
</a>
</div>
<div class="carousel-item carousel-column col-12 col-sm-6 col-md-4 col-lg-3 d-lg-block mt-lg-4 ci">
<a aria-label="Heartsaver® First Aid CPR AED" href="https://www.heart.org/" target="_blank" class="d-block"><img src="https://stg-shopcpr.laerdalblr.in/pub/media/wysiwyg/wysiwyg/homepage-heart_600x400.jpg" class="img-fluid d-block" alt=""/>
<p class="carousel-caption font-600">
Heartsaver® First Aid CPR AED
</p>
</a>
</div>
<div class="carousel-item carousel-column col-12 col-sm-6 col-md-4 col-lg-3 d-lg-block mt-lg-4 ci">
<a aria-label="Heartsaver® Pediatric" href="https://www.heart.org/" target="_blank" class="d-block"><img src="https://stg-shopcpr.laerdalblr.in/pub/media/wysiwyg/wysiwyg/homepage-heart_600x400.jpg" class="img-fluid d-block" alt=""/>
<p class="carousel-caption font-600">
Heartsaver® Pediatric
</p>
</a>
</div>
<div class="carousel-item carousel-column col-12 col-sm-6 col-md-4 col-lg-3 d-lg-block mt-lg-4 ci">
<a aria-label="PEARS" href="https://www.heart.org/" target="_blank" class="d-block"><img src="https://stg-shopcpr.laerdalblr.in/pub/media/wysiwyg/wysiwyg/homepage-heart_600x400.jpg" class="img-fluid d-block" alt=""/>
<p class="carousel-caption font-600">
PEARS
</p>
</a>
</div>
<div class="carousel-item carousel-column col-12 col-sm-6 col-md-4 col-lg-3 d-lg-block mt-lg-4 ci">
<a aria-label="CPR Anytime" href="https://www.heart.org/" target="_blank" class="d-block"><img src="https://stg-shopcpr.laerdalblr.in/pub/media/wysiwyg/wysiwyg/homepage-heart_600x400.jpg" class="img-fluid d-block" alt=""/>
<p class="carousel-caption font-600">
CPR Anytime
</p>
</a>
</div>
<div class="carousel-item carousel-column col-12 col-sm-6 col-md-4 col-lg-3 d-lg-block mt-lg-4 ci">
<a aria-label="Opioid Courses" href="https://www.heart.org/" target="_blank" class="d-block"><img src="https://stg-shopcpr.laerdalblr.in/pub/media/wysiwyg/wysiwyg/homepage-heart_600x400.jpg" class="img-fluid d-block" alt=""/>
<p class="carousel-caption font-600">
Opioid Courses
</p>
</a>
</div>
<div class="carousel-item carousel-column col-12 col-sm-6 col-md-4 col-lg-3 d-lg-block mt-lg-4 ci">
<a aria-label="BP Measurement" href="https://www.heart.org/" target="_blank" class="d-block"><img src="https://stg-shopcpr.laerdalblr.in/pub/media/wysiwyg/wysiwyg/homepage-heart_600x400.jpg" class="img-fluid d-block" alt=""/>
<p class="carousel-caption font-600">
BP Measurement
</p>
</a>
</div>
</div>
<a class="carousel-control-prev d-lg-none" href="#carousel-slider" role="button" data-slide="prev">
<span class="carousel-control-prev-icon aha-icon-arrow-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next d-lg-none" href="#carousel-slider" role="button" data-slide="next">
<span class="carousel-control-next-icon aha-icon-arrow-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>Cards Horizontal
Courses
HTML
<div id="multiple-carousel-slider" class="carousel slide aui-multiple-carousel" data-ride="carousel" data-interval="false">
<div id= "carousel-container" class="carousel-inner row p-0 m-0">
<div class="carousel-item carousel-column col-12 col-sm-6 col-md-4 col-lg-3 active mt-lg-4 ci">
<div class="aui-prodcard d-flex justify-content-center align-items-center flex-column">
<div class="aui-prodcard-img d-flex justify-content-center align-items-center flex-column">
<a href="" class="card-img d-flex mx-auto">
<img src="..." class="card-img mx-auto" alt="card head" />
</a>
<p class="aui-prodcard-name">Basic Life Support 1</p>
</div>
<div class="aui-prodcard-price">$300.00</div>
<button class="btn btn-round btn-primary">Add to Cart</button>
</div>
</div>
<div class="carousel-item carousel-column col-12 col-sm-6 col-md-4 col-lg-3 mt-lg-4 ci">
<div class="aui-prodcard d-flex justify-content-center align-items-center flex-column">
<div class="aui-prodcard-img d-flex justify-content-center align-items-center flex-column">
<a href="" class="card-img d-flex mx-auto">
<img src="..." class="card-img mx-auto" alt="card head" />
</a>
<p class="aui-prodcard-name">Basic Life Support 2</p>
</div>
<div class="aui-prodcard-price">$300.00</div>
<button class="btn btn-round btn-primary">Add to Cart</button>
</div>
</div>
<div class="carousel-item carousel-column col-12 col-sm-6 col-md-4 col-lg-3 mt-lg-4 ci">
<div class="aui-prodcard d-flex justify-content-center align-items-center flex-column">
<div class="aui-prodcard-img d-flex justify-content-center align-items-center flex-column">
<a href="" class="card-img d-flex mx-auto">
<img src="..." class="card-img mx-auto" alt="card head" />
</a>
<p class="aui-prodcard-name">Basic Life Support3</p>
</div>
<div class="aui-prodcard-price">$300.00</div>
<button class="btn btn-round btn-primary">Add to Cart</button>
</div>
</div>
<div class="carousel-item carousel-column col-12 col-sm-6 col-md-4 col-lg-3 mt-lg-4 ci">
<div class="aui-prodcard d-flex justify-content-center align-items-center flex-column">
<div class="aui-prodcard-img d-flex justify-content-center align-items-center flex-column">
<a href="" class="card-img d-flex mx-auto">
<img src="..." class="card-img mx-auto" alt="card head" />
</a>
<p class="aui-prodcard-name">Basic Life Support4</p>
</div>
<div class="aui-prodcard-price">$300.00</div>
<button class="btn btn-round btn-primary">Add to Cart</button>
</div>
</div>
<div class="carousel-item carousel-column col-12 col-sm-6 col-md-4 col-lg-3 mt-lg-4 ci">
<div class="aui-prodcard d-flex justify-content-center align-items-center flex-column">
<div class="aui-prodcard-img d-flex justify-content-center align-items-center flex-column">
<a href="" class="card-img d-flex mx-auto">
<img src="..." class="card-img mx-auto" alt="card head" />
</a>
<p class="aui-prodcard-name">Basic Life Support5</p>
</div>
<div class="aui-prodcard-price">$300.00</div>
<button class="btn btn-round btn-primary">Add to Cart</button>
</div>
</div>
<div class="carousel-item carousel-column col-12 col-sm-6 col-md-4 col-lg-3 mt-lg-4 ci">
<div class="aui-prodcard d-flex justify-content-center align-items-center flex-column">
<div class="aui-prodcard-img d-flex justify-content-center align-items-center flex-column">
<a href="" class="card-img d-flex mx-auto">
<img src="..." class="card-img mx-auto" alt="card head" />
</a>
<p class="aui-prodcard-name">Basic Life Support6</p>
</div>
<div class="aui-prodcard-price">$300.00</div>
<button class="btn btn-round btn-primary">Add to Cart</button>
</div>
</div>
<div class="carousel-item carousel-column col-12 col-sm-6 col-md-4 col-lg-3 mt-lg-4 ci">
<div class="aui-prodcard d-flex justify-content-center align-items-center flex-column">
<div class="aui-prodcard-img d-flex justify-content-center align-items-center flex-column">
<a href="" class="card-img d-flex mx-auto">
<img src="..." class="card-img mx-auto" alt="card head" />
</a>
<p class="aui-prodcard-name">Basic Life Support7</p>
</div>
<div class="aui-prodcard-price">$300.00</div>
<button class="btn btn-round btn-primary">Add to Cart</button>
</div>
</div>
<div class="carousel-item carousel-column col-12 col-sm-6 col-md-4 col-lg-3 mt-lg-4 ci">
<div class="aui-prodcard d-flex justify-content-center align-items-center flex-column">
<div class="aui-prodcard-img d-flex justify-content-center align-items-center flex-column">
<a href="" class="card-img d-flex mx-auto">
<img src="..." class="card-img mx-auto" alt="card head" />
</a>
<p class="aui-prodcard-name">Basic Life Support8</p>
</div>
<div class="aui-prodcard-price">$300.00</div>
<button class="btn btn-round btn-primary">Add to Cart</button>
</div>
</div>
</div>
<a class="carousel-control-next" href="#multiple-carousel-slider" role="button" data-slide="next">
<span class="carousel-control-next-icon aha-icon-arrow-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<a class="carousel-control-prev action-disable" href="#multiple-carousel-slider" role="button" data-slide="prev">
<span class="carousel-control-prev-icon aha-icon-arrow-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
</div>Image Carousel
HTML
<div className="aui-image-slider">
<div className="aui-slider">
<ul className='aui-slider-parent'>
<li><img src='../../images/imgone.png' alt='gallary image one' /></li>
<li ><img src='../../images/imgtwo.png' alt='gallary image two' /></li>
<li><img src='../../images/imgone.png' alt='gallary image three' /></li>
</ul>
<button tabIndex="0" className="aui-left" aria-label='Previous Slider Image'></button>
<button tabIndex="0" className="aui-right" aria-label='Next Slider Image'></button>
</div>
<div className="aui-thumbnail-parent">
<ul className='aui-thumbnail p-0'>
<li tabIndex="0" className="p-2 thumbnail-li1"><img src='../../images/thumbnailone.png' alt='thumbnail image one' /></li>
<li tabIndex="0" className="p-2"><img src='../../images/thumbnailtwo.png' alt='thumbnail image two' /></li>
<li tabIndex="0" className="p-2"><img src='../../images/thumbnailone.png' alt='thumbnail image three'/></li>
</ul>
<div className="aui-activehigh-lights"></div>
</div>
</div>