Carousel
A carousel is a slideshow component that allows users to cycle through a series of images or content. It is a popular feature in web design for showcasing products, testimonials, or other content in a visually appealing way. In this design, we will create a simple carousel with testimonials to demonstrate how to implement this feature on a website.
Illustration of a Carousel Implementation
“
We're thrilled with the outstanding service and top-quality plants from Outback Nursery. The staff's expertise and the health of our garden's new additions surpassed our expectations. Highly recommended!
Sarah
“
Outback Nursery & Garden Centre has transformed my landscaping projects with their top-quality plants and exceptional service. Their expertise and reliability have made them my go-to supplier, ensuring stunning results and satisfied clients every time.
Zen
“
Outback Nursery & Garden Centre is my sanctuary for inspiration! With their diverse plant offerings and expert advice, sourcing for my interior designs is an absolute delight.
Mark
“
At Outback Nursery, I've found more than just a supplier – I've found a partner in my journey towards sustainable design. Their eco-conscious ethos and stunning selection make them an integral part of my design process
Elon
HTML Code
<div class="c-testimonials__wrapper">
<div class="c-testimonials__content-slide c-testimonials__content-slide--active">
<div class="c-testimonials__content center-content l-my-2">
<img class="c-testimonials__avatar l-mb-2" src="images/testimonials-avatar-sarah.jpg" alt="woman holding a potted plant">
<p class="c-testimonials__quote">“</p>
<p class="c-testimonials__text text-width l-mb-1-5">We're thrilled with the outstanding service and top-quality plants from Outback Nursery. The staff's expertise and the health of our garden's new additions surpassed our expectations. Highly recommended!</p>
<p class="c-testimonials__name u-fw-bold">Sarah</p>
</div>
</div>
<div class="c-testimonials__content-slide">
<div class="c-testimonials__content center-content l-my-2">
<img class="c-testimonials__avatar l-mb-2" src="images/testimonials-avatar-zen.jpg" alt="woman with bandana">
<p class="c-testimonials__quote">“</p>
<p class="c-testimonials__text text-width l-mb-1-5">Outback Nursery & Garden Centre has transformed my landscaping projects with their top-quality plants and exceptional service. Their expertise and reliability have made them my go-to supplier, ensuring stunning results and satisfied clients every time.</p>
<p class="c-testimonials__name u-fw-bold">Zen</p>
</div>
</div>
<div class="c-testimonials__content-slide">
<div class="c-testimonials__content center-content l-my-2">
<img class="c-testimonials__avatar l-mb-2" src="images/testimonials-avatar-mark.jpg" alt="side view of a man">
<p class="c-testimonials__quote">“</p>
<p class="c-testimonials__text text-width l-mb-1-5">Outback Nursery & Garden Centre is my sanctuary for inspiration! With their diverse plant offerings and expert advice, sourcing for my interior designs is an absolute delight.</p>
<p class="c-testimonials__name u-fw-bold">Mark</p>
</div>
</div>
<div class="c-testimonials__content-slide">
<div class="c-testimonials__content center-content l-my-2">
<img class="c-testimonials__avatar l-mb-2" src="images/testimonials-avatar-elon.jpg" alt="man holding a potted plant">
<p class="c-testimonials__quote">“</p>
<p class="c-testimonials__text text-width l-mb-1-5">At Outback Nursery, I've found more than just a supplier – I've found a partner in my journey towards sustainable design. Their eco-conscious ethos and stunning selection make them an integral part of my design process</p>
<p class="c-testimonials__name u-fw-bold">Elon</p>
</div>
</div>
<div class="c-testimonials__page-indicator l-flex l-flex-center center-content">
<span class="c-testimonials__page c-testimonials__page--active"></span>
<span class="c-testimonials__page"></span>
<span class="c-testimonials__page"></span>
<span class="c-testimonials__page"></span>
</div>
<div class="c-testimonials__left-arrow-wrap">
<div class="c-testimonials__left-arrow"></div>
</div>
<div class="c-testimonials__right-arrow-wrap">
<div class="c-testimonials__right-arrow"></div>
</div>
</div>