3.1
Getting Started
API
Carousel
The Bootstrap
carousel component, implemented in Ruby. Use it like any other matestack component in your apps, pages and components. It offers customizable options to simply achieve what is possible in bootstrap with this component. See below for more information about the possible options.bs_carousel(*args, &block)
bs_carousel(*args, &block)Returns a bootstrap carousel containing a hash of
items with path, title, text and interval. Also the carousel is customizable with the following options.Optional options
:controls- If settrue, the previous and next arrows will be visible:indicators- If settrue, the bottom indicators will be visible:fade- If settrue, the animation when switching between items will be faded animation instead of sliding animation:start- Set the active item for carousel at the beginning. Counting start at 0.:variant- If:dark, the dark carousel theme will be applied (using css class carousel-dark):cycle_on- Cycles through the carousel items from left to right.:pause_on- Stops the carousel from cycling through items.:prev_on- Cycles to the previous item.:next_on- Cycles to the next item.- Html attributes - all w3c confirm html attributes for div's can be set via options and will be added to the surrounding carousel div.
Further explanation
:itemsarray: each item can include a hash withpath,title,textandintervalwherepathis the image-url,intervalis the amount of time to delay between automatically cycling to the next item,titleandtextis the caption of the item:cycle_on,:pause_on,:prev_on,:next_onare JavaScript behaviors which can be trigger for example by an onclick method
Examples
Example 1: Basic Carousel with 2 items
1
bs_carousel items: [
2
{ path: image_url("matestack-data.png") },
3
{ path: image_url("matestack-data.png") }
4
]
Copied!
returns
1
<div id="..." class="carousel slide" data-bs-ride="carousel">
2
<div class="carousel-inner">
3
<div class="carousel-item active">
4
<img src="matestack-data.png" class="d-block w-100" alt="...">
5
</div>
6
<div class="carousel-item">
7
<img src="matestack-data.png" class="d-block w-100" alt="...">
8
</div>
9
</div>
10
</div>
Copied!
Example 2: Basic Carousel with captions and different interval
1
# declare items array before using carousel component
2
items = [
3
{ path: image_url("matestack-data.png"),
4
title: "First slide", text: "First slide text caption",
5
interval: 20000 },
6
{ path: image_url("matestack-data.png"),
7
title: "Second slide", text: "Second slide text caption",
8
interval: 5000 }
9
]
10
bs_carousel items: items
Copied!
returns
1
<div id="..." class="carousel slide" data-bs-ride="carousel">
2
<div class="carousel-inner">
3
<div class="carousel-item active" data-bs-interval="20000">
4
<img src="matestack-data.png" class="d-block w-100" alt="...">
5
<div class="carousel-caption d-none d-md-block">
6
<h5>First slide</h5>
7
<p>First slide text caption</p>
8
</div>
9
</div>
10
<div class="carousel-item" data-bs-interval="5000">
11
<img src="matestack-data.png" class="d-block w-100" alt="...">
12
<div class="carousel-caption d-none d-md-block">
13
<h5>Second slide</h5>
14
<p>Second slide text caption</p>
15
</div>
16
</div>
17
</div>
18
</div>
Copied!
Example 3: Using controls, indicators and faded animation
1
items = [
2
{ path: image_url("matestack-data.png") },
3
{ path: image_url("matestack-data.png") }
4
]
5
bs_carousel controls: true, indicators: true, fade: true, items: items
Copied!
returns
1
<div id="..." class="carousel slide carousel-fade" data-bs-ride="carousel">
2
<ol class="carousel-indicators">
3
<li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active"></li>
4
<li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"></li>
5
<li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"></li>
6
</ol>
7
<div class="carousel-inner">
8
<div class="carousel-item active">
9
<img src="matestack-data.png" class="d-block w-100" alt="...">
10
</div>
11
<div class="carousel-item">
12
<img src="matestack-data.png" class="d-block w-100" alt="...">
13
</div>
14
</div>
15
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-bs-slide="prev">
16
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
17
<span class="sr-only">Previous</span>
18
</a>
19
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-bs-slide="next">
20
<span class="carousel-control-next-icon" aria-hidden="true"></span>
21
<span class="sr-only">Next</span>
22
</a>
23
</div>
Copied!
Example 4: Trigger Carousel per event
with
cycle_on, pause_on, prev_on, next_on you can trigger the JavaScript behaviors of carousel per eventcycle_on and pause_on can be use similarly as the exmample with prev_on and next_on below1
items = [
2
{ path: image_url("matestack-data.png") },
3
{ path: image_url("matestack-data.png") }
4
]
5
bs_carousel prev_on: "prev-carousel", next_on: "next-carousel", items: items
6
​
7
onclick emit: "prev-carousel" do
8
bs_btn "Prev"
9
end
10
onclick emit: "next-carousel" do
11
bs_btn "Next"
12
end
Copied!
Last modified 4mo ago