Carousel
The WebUI carousel currently supports vertical and horizontal slide transitions as well as 2 types of fade transition. In addition there are 2 modes that can be set, these are configured by setting autoScale to true or false (the default is true). When autoScale is true the aspect ratio of any slide content such as images is maintained. Setting autoScale to false allows you to load content with varying dimensions, where the height of each slide will auto size to the height of the tallest content - you will also need to set the height of the carousel to that same height.
Simple Example
The following example shows how to set up a simple carousel with ability to start / stop and navigate to the previous and next slides. The carousel will start playing automatically as the autoPlay setting is set to true.
<div class="carousel" id="carousel1">
<div class="carousel-item-holder">
<div class="carousel-item border-sm border-dark">
<img src="images/landscape_1.jpg" />
</div>
<div class="carousel-item border-sm border-dark">
<img src="images/landscape_2.jpg" />
</div>
<div class="carousel-item border-sm border-dark">
<img src="images/landscape_3.jpg" />
</div>
<div class="carousel-item border-sm border-dark">
<img src="images/landscape_4.jpg" />
</div>
<div class="carousel-item border-sm border-dark">
<img src="images/landscape_5.jpg" />
</div>
<div class="carousel-item border-sm border-dark">
<img src="images/landscape_6.jpg" />
</div>
</div>
<div class="text text-bold">
<a href="#0" id="c1_prev" class="color-light place-middle-left">
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg></a>
<a href="#0" id="c1_next" class="color-light place-middle-right">
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"></polyline></svg>
</a>
</div>
</div>
<div class="row-spacing-md"></div>
<div class="flex align-items-center width-md">
<button id="c1_play" class="view-button-sm border-initial color-success color-focus-accent-5 text-left">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>
</button>
<button id="c1_stop" class="view-button-sm border-initial color-danger color-focus-accent-5 text-left">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><rect x="9" y="9" width="6" height="6"></rect></svg>
</button>
</div>
HTML
webui.ready( () => {
var carousel1 = ui("#carousel1").carouselControl({
autoPlay: true,
autoScale: true,
playDirection: "next",
playInterval: 10000,
stopOnHover: true,
transitionDuration: 1000,
transitionType: "slide",
transitionOrientation: "horizontal"
});
ui("#c1_prev").click( (e) => {
e.preventDefault();
carousel1.prev();
});
ui("#c1_next").click( (e) => {
e.preventDefault();
carousel1.next();
});
ui("#c1_play").click( (e) => {
e.preventDefault();
carousel1.play();
});
ui("#c1_stop").click( (e) => {
e.preventDefault();
carousel1.stop();
});
});
JS
Classes
The following classes are use to set up the basic carousel structure.
| Class | Description |
|---|---|
| carousel | Defines the carousel control context. |
| carousel-item-holder | Defines the container that will hold carousel items or slides. |
| carousel-item | Defines a carousel slide. |
Functions
WebUI provides a set of standard JavaScript carousel functions for operating carousels. The behaviour is controlled by the JavaScript initialisation as shown in the examples.
Functions used to operate the carousel.
| Function | Description |
|---|---|
| prev() | Moves the carousel to the previous slide. |
| next() | Moves the carousel to the next slide. |
| select(index) | Moves the carousel to the slide corresponding to the specified index. |
| play() | Starts the automatic slide transition sequence. |
| stop() | Stops the automatic slide transition sequence. |
| playDirection(direction) | Updates the carousel auto play direction. |
| playInterval(interval) | Updates the carousel auto play interval between slides. |
Function Arguments
Function arguments for selecting slides and updating play characteristics.
| Argument | Description |
|---|---|
| index | A zero based integer value representing a slide index. |
| direction | The direction as a string value. Can be either "next" or "prev". |
| interval | An integer value representing the interval in milliseconds. |
Settings
Javascript settings available for the carousel control.
| Setting | Description |
|---|---|
| autoPlay | Whether the carousel will automatically play slides on page load. Can be true or false. Default: true |
| autoScale | Whether the carousel will maintain the original image aspect ratio when the carousel scales with the viewport. Can be true or false. Default: true |
| playDirection | Whether the carousel will play forwards or backwards through the slides. Can be "next" or "prev". Default: "next" |
| playInterval | The amount of time in milliseconds between each slide transition. An integer value. Default: 10000 |
| stopOnHover | Whether the carousel will pause when the mouse pointer is over the carousel. Can be true or false. Default: true. |
| transitionDuration | The amount of time in milliseconds taken to complete each slide transition. An integer value. Default: 1000 |
| transitionType | The type of transition used when changing to a new slide. Can be "slide", "fade", or "crossfade". Default: "slide". |
| transitionOrientation | The direction of the transition. Can be "vertical" or "horizontal". Default: "horizontal". |
| width | The width of the carousel. Ignored if autoScale is true. Default: true. Can be any valid CSS width value. |
| height | The height of the carousel. Ignored if autoScale is true. Default: true. Can be any valid CSS height value. |
Customisation
Carousel Customisation
This example shows how the carousel settings can be changed at run-time and how to leverage slide change events to add customisations for each slide.
<div class="carousel" id="carousel2">
<div class="carousel-item-holder">
<div class="carousel-item border-sm border-dark">
<img src="images/landscape_1.jpg" />
</div>
<div class="carousel-item border-sm border-dark">
<img src="images/landscape_2.jpg" />
</div>
<div class="carousel-item border-sm border-dark">
<img src="images/landscape_3.jpg" />
</div>
<div class="carousel-item border-sm border-dark">
<img src="images/landscape_4.jpg" />
</div>
<div class="carousel-item border-sm border-dark">
<img src="images/landscape_5.jpg" />
</div>
<div class="carousel-item border-sm border-dark">
<img src="images/landscape_6.jpg" />
</div>
</div>
<div class="text text-bold">
<a href="#0" id="c2_prev" class="color-light place-middle-left">
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>
</a>
<a href="#0" id="c2_next" class="color-light place-middle-right">
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"></polyline></svg>
</a>
</div>
<div class="text-xl text-sm-bp-2-under color-light background-translucent-3 place-middle-center pad-left-md pad-right-md hidden" id="c2_textForSlide1">
Fade in text for slide 1
</div>
<div class="text-xl text-sm-bp-2-under color-light background-translucent-3 place-middle-center pad-left-md pad-right-md hidden" id="c2_textForSlide2">
Fade in text for slide 2
</div>
<div class="text-xl text-sm-bp-2-under color-light background-translucent-3 place-middle-center pad-left-md pad-right-md hidden" id="c2_textForSlide3">
Fade in text for slide 3
</div>
</div>
<div class="row-spacing-md"></div>
<div class="row align-items-center gap-xs">
<div class="col-3 flex">
<button id="c2_play" class="view-button-sm border-initial color-success color-focus-accent-5 text-left">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>
</button>
<button id="c2_stop" class="view-button-sm border-initial color-danger color-focus-accent-5 text-left">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><rect x="9" y="9" width="6" height="6"></rect></svg>
</button>
</div>
<div class="col-fixed-bp-3-over">
<select id="c2_selectSlide" class="control width-lg">
<option value="-1">Select slide</option>
<option value="0">1</option>
<option value="1">2</option>
<option value="2">3</option>
<option value="3">4</option>
<option value="4">5</option>
<option value="5">6</option>
</select>
</div>
<div class="col-fixed-bp-3-over">
<select id="c2_selectDirection" class="control width-lg">
<option value="-1">Select direction</option>
<option value="prev">Prev</option>
<option value="next">Next</option>
</select>
</div>
<div class="col-fixed-bp-3-over">
<select id="c2_selectInterval" class="control width-lg">
<option value="-1">Select interval</option>
<option value="3000">3000</option>
<option value="5000">5000</option>
<option value="10000">10000</option>
</select>
</div>
</div>
HTML
webui.ready( () => {
var carousel2 = ui("#carousel2").carouselControl({
autoPlay: true,
autoScale: true,
playDirection: "next",
playInterval: 10000,
stopOnHover: true,
transitionDuration: 1000,
transitionType: "crossfade",
transitionOrientation: "horizontal"
});
carousel2.on("ui.carousel.change.before", (e) => {
ui("#c2_textForSlide1, #c2_textForSlide2, #c2_textForSlide3").hide();
});
carousel2.on("ui.carousel.change.after", (e) => {
if (e.detail == 1) {
ui("#c2_textForSlide1").fadeIn(1000);
}
else if (e.detail == 2) {
ui("#c2_textForSlide2").fadeIn(1000);
}
else if (e.detail == 3) {
ui("#c2_textForSlide3").fadeIn(1000);
}
});
ui("#c2_selectSlide").change( function() {
var index = webui(this).getOptionValues(true)[0];
carousel2.select(index);
if (index == 0) {
ui("#c2_textForSlide1").fadeIn(1000);
}
else if (index == 1) {
ui("#c2_textForSlide2").fadeIn(1000);
}
else if (index == 2) {
ui("#c2_textForSlide3").fadeIn(1000);
}
});
ui("#c2_selectDirection").change( function() {
var dir = webui(this).getOptionValues(true)[0];
carousel2.playDirection(dir);
});
ui("#c2_selectInterval").change( function() {
var intvl = webui(this).getOptionValues(true)[0];
carousel2.playInterval(intvl);
});
ui("#c2_prev").click( (e) => {
e.preventDefault();
carousel2.prev();
});
ui("#c2_next").click( (e) => {
e.preventDefault();
carousel2.next();
});
ui("#c2_play").click( (e) => {
e.preventDefault();
carousel2.play();
});
ui("#c2_stop").click( (e) => {
e.preventDefault();
carousel2.stop();
});
}, true);
JS
Carousel Events
Carousel Event Callbacks
There are 2 event callbacks that can be used, ui.carousel.change.before and ui.carousel.change.after. The following script shows how to use the event callbacks.
webui.ready( () => {
carousel.on("ui.carousel.change.before", (e) => {
console.log("ui.carousel.change.before: current slide index = " + e.detail);
});
carousel.on("ui.carousel.change.after", (e) => {
console.log("ui.carousel.change.after: current slide index = " + e.detail);
});
});
JS
Carousel EventsIn order to get the new slide just moved to, you will need the ui.carousel.change.after event.