Carousels
Overview
Carousels are used in a few areas like e-commerce and testimonials. We try to stick with Bootstrap's carousels for most of the design. However, we used the Flickity carousel as well. Check out the Credits page in documentation for more information on Flickity.
Basic Bootstrap Carousel
The Basic Bootstrap Carousel is used for the Hero carousel on the main Shop page and for the assorted Testimonial carousels found throughout the theme.
Slide 1
Here is some text.
Slide 2
Here is some text.
Slide 3
Here is some text.
<!-- Basic Bootstrap Carousel -->
<div id="basicBootstrapCarousel" class="carousel slide position-relative">
<div class="carousel-indicators">
<button type="button" data-bs-target="#basicBootstrapCarousel" data-bs-slide-to="0"
class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#basicBootstrapCarousel" data-bs-slide-to="1"
aria-label="Slide 2"></button>
<button type="button" data-bs-target="#basicBootstrapCarousel" data-bs-slide-to="2"
aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row">
<div class="col-12 position-relative">
<img src="/src/img/hero-slide-1.jpg" class="w-100 d-block"
alt="ecommerce hero image">
<div
class="carousel-text position-absolute w-100 h-100 top-0 start-0 d-flex justify-content-center align-items-center">
<div
class="d-flex justify-content-center flex-column align-items-center px-5">
<h2>Slide 1</h2>
<p>Here is some text.</p>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-12 position-relative">
<img src="/src/img/hero-slide-1.jpg" class="w-100 d-block"
alt="ecommerce hero image">
<div
class="carousel-text position-absolute w-100 h-100 top-0 start-0 d-flex justify-content-center align-items-center">
<div
class="d-flex justify-content-center flex-column align-items-center px-5">
<h2>Slide 2</h2>
<p>Here is some text.</p>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-12 position-relative">
<img src="/src/img/hero-slide-1.jpg" class="w-100 d-block"
alt="ecommerce hero image">
<div
class="carousel-text position-absolute w-100 h-100 top-0 start-0 d-flex justify-content-center align-items-center">
<div
class="d-flex justify-content-center flex-column align-items-center px-5">
<h2>Slide 3</h2>
<p>Here is some text.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#basicBootstrapCarousel"
data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#basicBootstrapCarousel"
data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
Single Product Carousel
This is also a Bootstrap carousel with a small modification. Its thumbnails use indicators that have been styled to include preview images. It can be found on the Single Product page.
<!-- Single Product Carousel -->
<section id="singleProductsArea" class="container py-2 mb-0 mb-md-5">
<div class="row">
<div class="col-12 col-lg-8">
<!-- View -->
<div id="productSingleCarouselIndicator"
class="carousel slide carousel-fade mt-5 mb-3 rounded-5 overflow-hidden">
<div class="carousel-indicators">
<button type="button" data-bs-target="#productSingleCarouselIndicator"
data-bs-slide-to="0" class="active rounded-1" aria-current="true"
aria-label="Slide 1"><img src="../img/product-single-slide-1.jpg"
class="img-fluid d-block mx-auto" alt=""></button>
<button type="button" class="rounded-1"
data-bs-target="#productSingleCarouselIndicator"
data-bs-slide-to="1" aria-label="Slide 2"><img
src="../img/product-single-slide-2.jpg"
class="img-fluid d-block mx-auto" alt=""></button>
<button type="button" class="rounded-1"
data-bs-target="#productSingleCarouselIndicator"
data-bs-slide-to="2" aria-label="Slide 3"><img
src="../img/product-single-slide-3.jpg"
class="img-fluid d-block mx-auto" alt=""></button>
<button type="button" class="rounded-1"
data-bs-target="#productSingleCarouselIndicator"
data-bs-slide-to="3" aria-label="Slide 4"><img
src="../img/product-single-slide-4.jpg"
class="img-fluid d-block mx-auto" alt=""></button>
<button type="button" class="rounded-1"
data-bs-target="#productSingleCarouselIndicator"
data-bs-slide-to="4" aria-label="Slide 5"><img
src="../img/product-single-slide-5.jpg"
class="img-fluid d-block mx-auto" alt=""></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="../img/product-single-slide-1.jpg"
class="d-block w-100 img-fluid" alt="yoga pants">
</div>
<div class="carousel-item">
<img src="../img/product-single-slide-2.jpg"
class="d-block w-100 img-fluid" alt="yoga pants">
</div>
<div class="carousel-item">
<img src="../img/product-single-slide-3.jpg"
class="d-block w-100 img-fluid" alt="yoga pants">
</div>
<div class="carousel-item">
<img src="../img/product-single-slide-4.jpg"
class="d-block w-100 img-fluid" alt="yoga pants">
</div>
<div class="carousel-item">
<img src="../img/product-single-slide-5.jpg"
class="d-block w-100 img-fluid" alt="yoga pants">
</div>
</div>
</div>
</div>
</div>
</section>
Flickity Carousel
The Flickity Carousel uses flickity.js for its functionality. To work properly the
carousel must
reference Flickity's javascript. Check out their website to learn
more about Flickity.
Slide 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Slide 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<!-- Flickity Carousel -->
<section class="container-fluid pt-7 pb-5 gradient-brand-primary-top">
<div class="container">
<div class="row flex-column flex-md-row">
<div class="col-12 col-md-6 col-lg-4 offset-lg-2">
<div class="carousel carousel-nav" data-flickity>
<div class="carousel-cell">
<img src="../img/gift-slide-1.jpg" class="img-fluid" alt="Gift Ideas">
</div>
<div class="carousel-cell">
<img src="../img/gift-slide-2.jpg" class="img-fluid" alt="Gift Ideas">
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4 px-5">
<div class="carousel carousel-main text-center" data-flickity>
<div class="carousel-cell">
<h3>Slide 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<button
class="shadow btn btn-brand-primary btn-xl rounded-pill mb-5">Button</button>
</div>
<div class="carousel-cell">
<h3>Slide 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<button
class="shadow btn btn-brand-primary btn-xl rounded-pill mb-5">Button</button>
</div>
</div>
</div>
</div>
</div>
</section>