Carousels
Responsive carousels are used for displaying categories, products and articles.
Carousel Props
id: [string] - Required carousel ID
perView: [number] - Number of slides to display on desktop viewport widths. Defaults to 4.
autoplay: [boolean|number] - Optional: Time (in milliseconds) to wait between each slide. Defaults to false.
slides: [array] - List of slides to include
Product Carousel Example
<div id="productsCarousel" 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 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">Morbi tristique senectus</a></h3>
<p class="card-text small text-muted mb-3">Starting at $599</span>
<p class="card-text">Feugiat scelerisque varius morbi enim nunc faucibus ant.</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">Mi Tempus Imperdiet Nulla</a></h3>
<p class="card-text small text-muted mb-3">Starting at $1249</span>
<p class="card-text">Posuere sollicitudin aliquam ultrices sagittis elementum eu sed odio.</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>
<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>
Product Carousel Alt Example
<div id="productsCarousel" 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-16-9.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 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-16-9.jpg" alt="image description">
<div class="card-body">
<h3 class="card-title"><a href="#" class="stretched-link">Morbi tristique senectus</a></h3>
<p class="card-text small text-muted mb-3">Starting at $599</span>
<p class="card-text">Feugiat scelerisque varius morbi enim nunc faucibus ant.</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-16-9.jpg" alt="image description">
<div class="card-body">
<h3 class="card-title"><a href="#" class="stretched-link">Mi Tempus Imperdiet Nulla</a></h3>
<p class="card-text small text-muted mb-3">Starting at $1249</span>
<p class="card-text">Posuere sollicitudin aliquam ultrices sagittis elementum eu sed odio.</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>
<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>
Article Carousel Example
<div id="articleCarousel" 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-1-1.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-1-1-dark.jpg" alt="image description">
<div class="card-body">
<h3 class="card-title">
<span class="card-sub-title">Super Heading</span>
Tortor dignissim convallis aenean et tortor at
</h3>
<p class="card-text">Arcu non odio euismod lacinia at quis.</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-1-1-dark.jpg" alt="image description">
<div class="card-body">
<h3 class="card-title">
<span class="card-sub-title">Super Heading</span>
Odio aenean sed adipiscing diam donec
</h3>
<p class="card-text">Vitae purus faucibus ornare suspendisse. Lacinia quis vel eros donec ac odio.</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-1-1.jpg" alt="image description">
<div class="card-body">
<h3 class="card-title">
<span class="card-sub-title">Super Heading</span>
Tincidunt arcu non sodales neque sodales
</h3>
<p class="card-text">Amet dictum sit amet justo donec. Blandit libero volutpat sed cras.</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>
<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>