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.
Desktop
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>Carousel Desktop
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.
Desktop
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="../../images/card-head.png" 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="../../images/card-head.png" 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="../../images/card-head.png" 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="../../images/card-head.png" 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="../../images/card-head.png" 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="../../images/card-head.png" 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="../../images/card-head.png" 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="../../images/card-head.png" 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>