Check with your designers to help you design this section
Check with your designers to help you design this section
<div class="raul-carousel-container raul-carousel-container-grey" id="raul-carousel">
<h2>Carousel row with grey background</h2>
<div name="sample" class="raul-carousel">
<a href="#" class="prev raul-carousel-icon-left">
<i class="fa fa-chevron-left" aria-hidden="true"></i>
</a>
<a href="#" class="next raul-carousel-icon-right">
<i class="fa fa-chevron-right" aria-hidden="true"></i>
</a>
<div class="visible-area">
<ul class="row raul-carousel-items">
<li class="raul-carousel-item">
<div class="raul-carousel-item-wrapper center-vertically">
<div class="raul-carousel-item-title">
<span>Shipping1</span>
</div>
<div class="raul-carousel-item-description">
<span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</span>
</div>
</div>
</li>
<li class="raul-carousel-item">
<div class="raul-carousel-item-wrapper center-vertically">
<div class="raul-carousel-item-title">
<span>Shipping2</span>
</div>
<div class="raul-carousel-item-description">
<span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</span>
</div>
</div>
</li>
<li class="raul-carousel-item">
<div class="raul-carousel-item-wrapper center-vertically">
<div class="raul-carousel-item-title">
<span>Shipping3</span>
</div>
<div class="raul-carousel-item-description">
<span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</span>
</div>
</div>
</li>
<li class="raul-carousel-item">
<div class="raul-carousel-item-wrapper center-vertically">
<div class="raul-carousel-item-title">
<span>Shipping4</span>
</div>
<div class="raul-carousel-item-description">
<span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</span>
</div>
</div>
</li>
<li class="raul-carousel-item">
<div class="raul-carousel-item-wrapper center-vertically">
<div class="raul-carousel-item-title">
<span>Shipping5</span>
</div>
<div class="raul-carousel-item-description">
<span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</span>
</div>
</div>
</li>
<li class="raul-carousel-item">
<div class="raul-carousel-item-wrapper center-vertically">
<div class="raul-carousel-item-title">
<span>Shipping6</span>
</div>
<div class="raul-carousel-item-description">
<span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</span>
</div>
</div>
</li>
<li class="raul-carousel-item">
<div class="raul-carousel-item-wrapper center-vertically">
<div class="raul-carousel-item-title">
<span>Shipping7</span>
</div>
<div class="raul-carousel-item-description">
<span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</span>
</div>
</div>
</li>
<li class="raul-carousel-item">
<div class="raul-carousel-item-wrapper center-vertically">
<div class="raul-carousel-item-title">
<span>Shipping8</span>
</div>
<div class="raul-carousel-item-description">
<span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</span>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
const rowCarousel = new BasicCarousel(document.querySelector('#raul-carousel'));
<div class="raul-carousel-container" id="raul-carousel-grid">
<h2>Carousel grid</h2>
<div name="sample" class="raul-carousel raul-carousel-grid">
<a href="#" class="prev raul-carousel-icon-left">
<i class="fa fa-chevron-left" aria-hidden="true"></i>
</a>
<a href="#" class="next raul-carousel-icon-right">
<i class="fa fa-chevron-right" aria-hidden="true"></i>
</a>
<div class="visible-area">
<ul class="row raul-carousel-items">
<li class="raul-carousel-item">
<div class="raul-carousel-item-wrapper center-vertically">
<div class="raul-carousel-item-title">
<span>Shipping1</span>
</div>
<div class="raul-carousel-item-description">
<span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</span>
</div>
</div>
<div class="raul-carousel-item-wrapper center-vertically">
<div class="raul-carousel-item-title">
<span>Shipping1</span>
</div>
<div class="raul-carousel-item-description">
<span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</span>
</div>
</div>
</li>
<li class="raul-carousel-item">
<div class="raul-carousel-item-wrapper center-vertically">
<div class="raul-carousel-item-title">
<span>Shipping2</span>
</div>
<div class="raul-carousel-item-description">
<span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</span>
</div>
</div>
<div class="raul-carousel-item-wrapper center-vertically">
<div class="raul-carousel-item-title">
<span>Shipping2</span>
</div>
<div class="raul-carousel-item-description">
<span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</span>
</div>
</div>
</li>
<li class="raul-carousel-item">
<div class="raul-carousel-item-wrapper center-vertically">
<div class="raul-carousel-item-title">
<span>Shipping3</span>
</div>
<div class="raul-carousel-item-description">
<span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</span>
</div>
</div>
<div class="raul-carousel-item-wrapper center-vertically">
<div class="raul-carousel-item-title">
<span>Shipping3</span>
</div>
<div class="raul-carousel-item-description">
<span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</span>
</div>
</div>
</li>
<li class="raul-carousel-item">
<div class="raul-carousel-item-wrapper center-vertically">
<div class="raul-carousel-item-title">
<span>Shipping4</span>
</div>
<div class="raul-carousel-item-description">
<span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</span>
</div>
</div>
<div class="raul-carousel-item-wrapper center-vertically">
<div class="raul-carousel-item-title">
<span>Shipping4</span>
</div>
<div class="raul-carousel-item-description">
<span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</span>
</div>
</div>
</li>
<li class="raul-carousel-item">
<div class="raul-carousel-item-wrapper center-vertically">
<div class="raul-carousel-item-title">
<span>Shipping5</span>
</div>
<div class="raul-carousel-item-description">
<span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</span>
</div>
</div>
<div class="raul-carousel-item-wrapper center-vertically">
<div class="raul-carousel-item-title">
<span>Shipping5</span>
</div>
<div class="raul-carousel-item-description">
<span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</span>
</div>
</div>
</li>
<li class="raul-carousel-item">
<div class="raul-carousel-item-wrapper center-vertically">
<div class="raul-carousel-item-title">
<span>Shipping6</span>
</div>
<div class="raul-carousel-item-description">
<span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</span>
</div>
</div>
<div class="raul-carousel-item-wrapper center-vertically">
<div class="raul-carousel-item-title">
<span>Shipping6</span>
</div>
<div class="raul-carousel-item-description">
<span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</span>
</div>
</div>
</li>
<li class="raul-carousel-item">
<div class="raul-carousel-item-wrapper center-vertically">
<div class="raul-carousel-item-title">
<span>Shipping7</span>
</div>
<div class="raul-carousel-item-description">
<span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</span>
</div>
</div>
<div class="raul-carousel-item-wrapper center-vertically">
<div class="raul-carousel-item-title">
<span>Shipping7</span>
</div>
<div class="raul-carousel-item-description">
<span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</span>
</div>
</div>
</li>
<li class="raul-carousel-item">
<div class="raul-carousel-item-wrapper center-vertically">
<div class="raul-carousel-item-title">
<span>Shipping8</span>
</div>
<div class="raul-carousel-item-description">
<span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</span>
</div>
</div>
<div class="raul-carousel-item-wrapper center-vertically">
<div class="raul-carousel-item-title">
<span>Shipping8</span>
</div>
<div class="raul-carousel-item-description">
<span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</span>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
const gridCarousel = new BasicCarousel(document.querySelector('#raul-carousel-grid'));
<div class="cards-container">
<div class="raul-carousel-container" id="raul-carousel-cards">
<h2>Carousel Cards</h2>
<div name="sample" class="raul-carousel raul-carousel-cards">
<a href="#" class="prev raul-carousel-icon-left">
<i class="fa fa-chevron-left" aria-hidden="true"></i>
</a>
<a href="#" class="next raul-carousel-icon-right">
<i class="fa fa-chevron-right" aria-hidden="true"></i>
</a>
<div class="visible-area">
<ul class="row raul-carousel-items">
<li class="raul-carousel-item" data-index="1">
<div class="raul-carousel-item-wrapper center-vertically">
<div class="raul-carousel-item-text">
<div class="raul-carousel-item-title">
<span>Shipping1</span>
</div>
<div class="raul-carousel-item-description">
<span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</span>
</div>
</div>
</div>
</li>
<li class="raul-carousel-item" data-index="2">
<div class="raul-carousel-item-wrapper center-vertically">
<div class="raul-carousel-item-text">
<div class="raul-carousel-item-title">
<span>Shipping2</span>
</div>
<div class="raul-carousel-item-description">
<span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</span>
</div>
</div>
</div>
</li>
<li class="raul-carousel-item" data-index="3">
<div class="raul-carousel-item-wrapper center-vertically">
<div class="raul-carousel-item-text">
<div class="raul-carousel-item-title">
<span>Shipping3</span>
</div>
<div class="raul-carousel-item-description">
<span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</span>
</div>
</div>
</div>
</li>
<li class="raul-carousel-item" data-index="4">
<div class="raul-carousel-item-wrapper center-vertically">
<div class="raul-carousel-item-text">
<div class="raul-carousel-item-title">
<span>Shipping4</span>
</div>
<div class="raul-carousel-item-description">
<span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</span>
</div>
</div>
</div>
</li>
<li class="raul-carousel-item" data-index="5">
<div class="raul-carousel-item-wrapper center-vertically">
<div class="raul-carousel-item-text">
<div class="raul-carousel-item-title">
<span>Shipping5</span>
</div>
<div class="raul-carousel-item-description">
<span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</span>
</div>
</div>
</div>
</li>
</ul>
<div class="raul-carousel-dots"></div>
</div>
</div>
</div>
</div>
const cardCarousel = new CardCarousel(document.querySelector('#raul-carousel-cards'));
<ui-carousel
carousel-title="Carousel row custom element"
grey-background
>
<ui-carousel-slide>
<ui-carousel-item
item-title="Item title"
item-description="Item description Lorem ipsum dolor sit amet, consectetuer adipiscing elit."
>
</ui-carousel-item>
</ui-carousel-slide>
<ui-carousel-slide>
<ui-carousel-item
item-title="Item title"
item-description="Item description Lorem ipsum dolor sit amet, consectetuer adipiscing elit."
>
</ui-carousel-item>
</ui-carousel-slide>
<ui-carousel-slide>
<ui-carousel-item
item-title="Item title"
item-description="Item description Lorem ipsum dolor sit amet, consectetuer adipiscing elit."
>
</ui-carousel-item>
</ui-carousel-slide>
<ui-carousel-slide>
<ui-carousel-item>
Your own markup
</ui-carousel-item>
</ui-carousel-slide>
<ui-carousel-slide>
<ui-carousel-item>
Your own markup
</ui-carousel-item>
</ui-carousel-slide>
<ui-carousel-slide>
<ui-carousel-item>
Your own markup
</ui-carousel-item>
</ui-carousel-slide>
<ui-carousel-slide>
<ui-carousel-item>
Your own markup
</ui-carousel-item>
</ui-carousel-slide>
<ui-carousel-slide>
<ui-carousel-item>
Your own markup
</ui-carousel-item>
</ui-carousel-slide>
<ui-carousel-slide>
<ui-carousel-item>
Your own markup
</ui-carousel-item>
</ui-carousel-slide>
<ui-carousel-slide>
<ui-carousel-item>
Your own markup
</ui-carousel-item>
</ui-carousel-slide>
<ui-carousel-slide>
<ui-carousel-item>
Your own markup
</ui-carousel-item>
</ui-carousel-slide>
</ui-carousel>
<ui-carousel
carousel-title="Carousel grid custom element"
type="grid"
>
<ui-carousel-slide>
<ui-carousel-item
item-title="Item title"
item-description="Item description Lorem ipsum dolor sit amet, consectetuer adipiscing elit."
>
</ui-carousel-item>
<ui-carousel-item
item-title="Item title"
item-description="Item description Lorem ipsum dolor sit amet, consectetuer adipiscing elit."
>
</ui-carousel-item>
</ui-carousel-slide>
<ui-carousel-slide>
<ui-carousel-item>
Your own markup top
</ui-carousel-item>
<ui-carousel-item>
Your own markup bottom
</ui-carousel-item>
</ui-carousel-slide>
<ui-carousel-slide>
<ui-carousel-item>
Your own markup top
</ui-carousel-item>
<ui-carousel-item>
Your own markup bottom
</ui-carousel-item>
</ui-carousel-slide>
<ui-carousel-slide>
<ui-carousel-item>
Your own markup top
</ui-carousel-item>
<ui-carousel-item>
Your own markup bottom
</ui-carousel-item>
</ui-carousel-slide>
<ui-carousel-slide>
<ui-carousel-item>
Your own markup top
</ui-carousel-item>
<ui-carousel-item>
Your own markup bottom
</ui-carousel-item>
</ui-carousel-slide>
<ui-carousel-slide>
<ui-carousel-item>
Your own markup top
</ui-carousel-item>
<ui-carousel-item>
Your own markup bottom
</ui-carousel-item>
</ui-carousel-slide>
<ui-carousel-slide>
<ui-carousel-item>
Your own markup top
</ui-carousel-item>
<ui-carousel-item>
Your own markup bottom
</ui-carousel-item>
</ui-carousel-slide>
<ui-carousel-slide>
<ui-carousel-item>
Your own markup top
</ui-carousel-item>
<ui-carousel-item>
Your own markup bottom
</ui-carousel-item>
</ui-carousel-slide>
<ui-carousel-slide>
<ui-carousel-item>
Your own markup top
</ui-carousel-item>
<ui-carousel-item>
Your own markup bottom
</ui-carousel-item>
</ui-carousel-slide>
</ui-carousel>
<ui-carousel
carousel-title="Carousel card custom element"
type="cards"
>
<ui-carousel-slide index="1">
<ui-carousel-item
item-title="Item title"
item-description="Item description Lorem ipsum dolor sit amet, consectetuer adipiscing elit."
>
</ui-carousel-item>
</ui-carousel-slide>
<ui-carousel-slide index="2">
<ui-carousel-item
item-title="Item title"
item-description="Item description Lorem ipsum dolor sit amet, consectetuer adipiscing elit."
>
</ui-carousel-item>
</ui-carousel-slide>
<ui-carousel-slide index="3">
<ui-carousel-item
>
<div>Your own markup</div>
</ui-carousel-item>
</ui-carousel-slide>
</ui-carousel>
| Custom element | Attribute | Value Type | Default Value | Description |
|---|---|---|---|---|
ui-carousel
|
carousel-title
|
String
|
None | Sets the carousel title text. |
grey-background
|
Boolean
|
None | Adds a grey background to the carousel if present. | |
type
|
String
|
None | Sets the type of the carousel. Expects 'grid' or 'cards'. If no value is added a row carousel will be created. | |
ui-carousel-slide
|
index
|
Number
|
None | Sets the index for each slide. This is necessary only for cards carousel. |
ui-carousel-item
|
item-title
|
String
|
None | Sets the carousel item title. |
item-description
|
String
|
None | Sets the carousel item description. |