Carousel Section
Responsive list carousel section allowing content to run offscreen on right side
Component Props
mainTitle: [string] - Section main title
section: [array] - Alphabetic range of glossary terms
- secTitle: [string] - Section main title
items: [array] - list of product literature card data
- term: [string] - Definition term
description: [string] - Definition description
Product Carousel Example
<section>
<div class="container-fluid container-no-right-gutter">
<div class="row g-0 rbn-section-space">
<div class="col">
<h3 class="section-title">Section title</h3>
<div id="productCarousel1" class="glide rbnSlider">
<div class="glide__track" data-glide-el="track">
<ul class="glide__slides">
<li class="glide__slide">
<div class="card card-rbn-product">
<img class="card-img-top" src="../../../../assets/img/fpo/fpo-image-1-1.jpg" alt="image description">
<div class="card-body">
<h3 class="card-title"><a href="#" class="stretched-link">Product Title</a></h3>
<p class="card-text small text-muted mb-3">Starting at $$$ Substring</span>
<p class="card-text">Product short description.</span>
</div>
</div>
</li>
<li class="glide__slide">
<div class="card card-rbn-product">
<img class="card-img-top" src="../../../../assets/img/fpo/fpo-image-1-1.jpg" alt="image description">
<div class="card-body">
<h3 class="card-title"><a href="#" class="stretched-link">Product Title</a></h3>
<p class="card-text small text-muted mb-3">Starting at $$$ Substring</span>
<p class="card-text">Product short description.</span>
</div>
</div>
</li>
<li class="glide__slide">
<div class="card card-rbn-product">
<img class="card-img-top" src="../../../../assets/img/fpo/fpo-image-1-1.jpg" alt="image description">
<div class="card-body">
<h3 class="card-title"><a href="#" class="stretched-link">Product Title</a></h3>
<p class="card-text small text-muted mb-3">Starting at $$$ Substring</span>
<p class="card-text">Product short description.</span>
</div>
</div>
</li>
<li class="glide__slide">
<div class="card card-rbn-product">
<img class="card-img-top" src="../../../../assets/img/fpo/fpo-image-1-1.jpg" alt="image description">
<div class="card-body">
<h3 class="card-title"><a href="#" class="stretched-link">Product Title</a></h3>
<p class="card-text small text-muted mb-3">Starting at $$$ Substring</span>
<p class="card-text">Product short description.</span>
</div>
</div>
</li>
<li class="glide__slide">
<div class="card card-rbn-product">
<img class="card-img-top" src="../../../../assets/img/fpo/fpo-image-1-1.jpg" alt="image description">
<div class="card-body">
<h3 class="card-title"><a href="#" class="stretched-link">Product Title</a></h3>
<p class="card-text small text-muted mb-3">Starting at $$$ Substring</span>
<p class="card-text">Product short description.</span>
</div>
</div>
</li>
<li class="glide__slide">
<div class="card card-rbn-product">
<img class="card-img-top" src="../../../../assets/img/fpo/fpo-image-1-1.jpg" alt="image description">
<div class="card-body">
<h3 class="card-title"><a href="#" class="stretched-link">Product Title</a></h3>
<p class="card-text small text-muted mb-3">Starting at $$$ Substring</span>
<p class="card-text">Product short description.</span>
</div>
</div>
</li>
</ul>
</div>
<div class="glide__bullets" data-glide-el="controls[nav]">
<button class="glide__bullet" data-glide-dir="=0"></button>
<button class="glide__bullet" data-glide-dir="=1"></button>
<button class="glide__bullet" data-glide-dir="=2"></button>
<button class="glide__bullet" data-glide-dir="=3"></button>
<button class="glide__bullet" data-glide-dir="=4"></button>
<button class="glide__bullet" data-glide-dir="=5"></button>
<div class="glide__arrows" data-glide-el="controls">
<button class="glide__arrow glide__arrow--left" data-glide-dir="<">
<span class="visually-hidden">Previous Slide</span>
</button>
<button class="glide__arrow glide__arrow--right" data-glide-dir=">">
<span class="visually-hidden">Next Slide</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Article Carousel Example
<section class="bg-primary">
<div class="container-fluid container-no-right-gutter">
<div class="row g-0 rbn-section-space">
<div class="col">
<h2 class="section-title">Section title</h2>
<div id="articleCarousel1" class="glide rbnSlider">
<div class="glide__track" data-glide-el="track">
<ul class="glide__slides">
<li class="glide__slide">
<div class="card rbn-article-card">
<img class="card-img" src="../../../../assets/img/fpo/fpo-image-4-3.jpg" alt="image description">
<div class="card-body">
<h3 class="card-title">
<span class="card-sub-title">Super Heading</span>
Article Title
</h3>
<p class="card-text">Dapibus ultrices in iaculis nunc sed augue. Viverra tellus in hac habitasse platea dictumst vestibulum rhoncus.</p>
<a href="#" class="card-link stretched-link mt-auto">Read more</a>
</div>
</div>
</li>
<li class="glide__slide">
<div class="card rbn-article-card">
<img class="card-img" src="../../../../assets/img/fpo/fpo-image-4-3.jpg" alt="image description">
<div class="card-body">
<h3 class="card-title">
<span class="card-sub-title">Super Heading</span>
Article Title
</h3>
<p class="card-text">Dapibus ultrices in iaculis nunc sed augue. Viverra tellus in hac habitasse platea dictumst vestibulum rhoncus.</p>
<a href="#" class="card-link stretched-link mt-auto">Read more</a>
</div>
</div>
</li>
<li class="glide__slide">
<div class="card rbn-article-card">
<img class="card-img" src="../../../../assets/img/fpo/fpo-image-4-3.jpg" alt="image description">
<div class="card-body">
<h3 class="card-title">
<span class="card-sub-title">Super Heading</span>
Article Title
</h3>
<p class="card-text">Dapibus ultrices in iaculis nunc sed augue. Viverra tellus in hac habitasse platea dictumst vestibulum rhoncus.</p>
<a href="#" class="card-link stretched-link mt-auto">Read more</a>
</div>
</div>
</li>
<li class="glide__slide">
<div class="card rbn-article-card">
<img class="card-img" src="../../../../assets/img/fpo/fpo-image-4-3.jpg" alt="image description">
<div class="card-body">
<h3 class="card-title">
<span class="card-sub-title">Super Heading</span>
Article Title
</h3>
<p class="card-text">Dapibus ultrices in iaculis nunc sed augue. Viverra tellus in hac habitasse platea dictumst vestibulum rhoncus.</p>
<a href="#" class="card-link stretched-link mt-auto">Read more</a>
</div>
</div>
</li>
<li class="glide__slide">
<div class="card rbn-article-card">
<img class="card-img" src="../../../../assets/img/fpo/fpo-image-4-3.jpg" alt="image description">
<div class="card-body">
<h3 class="card-title">
<span class="card-sub-title">Super Heading</span>
Article Title
</h3>
<p class="card-text">Dapibus ultrices in iaculis nunc sed augue. Viverra tellus in hac habitasse platea dictumst vestibulum rhoncus.</p>
<a href="#" class="card-link stretched-link mt-auto">Read more</a>
</div>
</div>
</li>
</ul>
</div>
<div class="glide__bullets" data-glide-el="controls[nav]">
<button class="glide__bullet" data-glide-dir="=0"></button>
<button class="glide__bullet" data-glide-dir="=1"></button>
<button class="glide__bullet" data-glide-dir="=2"></button>
<button class="glide__bullet" data-glide-dir="=3"></button>
<button class="glide__bullet" data-glide-dir="=4"></button>
<div class="glide__arrows" data-glide-el="controls">
<button class="glide__arrow glide__arrow--left" data-glide-dir="<">
<span class="visually-hidden">Previous Slide</span>
</button>
<button class="glide__arrow glide__arrow--right" data-glide-dir=">">
<span class="visually-hidden">Next Slide</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</section>