Media WebUI

Carousel Classes

The WebUI carousel currently supports vertical and horizontal slide transitions as well as a 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.

Classes

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.

Carousel Settings

Settings

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 original image aspect ration when the carousel size changes.
Can be true or false. Default: true
interval
The amount of time in milliseconds between each slide transition.
An integer value. Default: 3000
playDirection
Whether the carousel will play forwards or backwards through the slides.
Can be "next" or "prev". Default: "next"
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.

Carousel

Example
Markup
<div class="carousel" id="carousel">
  <div class="carousel-item-holder">		
    <div class="carousel-item border-md border-secondary">
      <img src="images/landscape_1.jpg" />
    </div>
    <div class="carousel-item border-md border-secondary">
      <img src="images/landscape_2.jpg" />
    </div>
    <div class="carousel-item border-md border-secondary">
      <img src="images/landscape_3.jpg" />
    </div>
    <div class="carousel-item border-md border-secondary">
      <img src="images/landscape_4.jpg" />
    </div>
    <div class="carousel-item border-md border-secondary">
      <img src="images/landscape_5.jpg" />
    </div>
    <div class="carousel-item border-md border-secondary">
      <img src="images/landscape_6.jpg" />
    </div>
  </div>
  <div class="text text-bold">
    <a href="" id="c1_prev" class="text-xl pad-md background-transparent color-light fa fa-step-backward place-middle-left"></a>
    <a href="" id="c1_next" class="text-xl pad-md background-transparent color-light fa fa-step-forward place-middle-right"></a>
  </div>
  <div class="text-xl text-sm-bp-2-under color-light hidden place-middle-center" id="c1_textForSlide1">Fade in text for slide 1</div>
  <div class="text-xl text-sm-bp-2-under color-light hidden place-middle-center" id="c1_textForSlide2">Fade in text for slide 2</div>
  <div class="text-xl text-sm-bp-2-under color-light hidden place-middle-center" id="c1_textForSlide3">Fade in text for slide 3</div>			
</div>

<div class="row-spacing-md"></div>

<div class="width-full flex-justify-space-between">
  <div>
    <select id="c1_selectSlide" class="control width-lg">
      <option value="">Select slide</option>
      <option value="0">1</option>
      <option value="1">2</option>
      <option value="2">3</option>
    </select>
  </div>	
  <div>
    <button id="c1_play" class="button-sm button-light background-focus-accent-2-light fa fa-play"></button>
    <button id="c1_stop" class="button-sm button-light background-focus-accent-2-light fa fa-stop"></button>
  </div>
</div>
Script
webui.ready(function() {

  var carousel = ui("#carousel")
  .carouselControl({ 
    interval: 10000,
    autoPlay: true,
    autoScale: true,
    playDirection: "next",
    stopOnHover: true,
    transitionDuration: 1200, 
    transitionType: "slide", 
    transitionOrientation: "vertical" 
  });
  
  ui("#c1_textForSlide1").fadeIn(1500);

  carousel.on("ui.carousel.change.before", function(e) {
    ui("#c1_textForSlide1, #c1_textForSlide2, #c1_textForSlide3").hide();
  });
  
  carousel.on("ui.carousel.change.after", function(e) {
    if (e.detail == 1) {
      ui("#c1_textForSlide1").fadeIn(1500);
    }
    else if (e.detail == 2) {
      ui("#c1_textForSlide2").fadeIn(1500);
    }
    else if (e.detail == 3) {
      ui("#c1_textForSlide3").fadeIn(1500);
    }
  });
  
  ui("#c1_selectSlide").change( function() { 
    var index = webui(this).getOptionValues(true)[0];
    carousel.select(index);
    if (index == 0) {
      ui("#c1_textForSlide1").fadeIn(1500);
    }
    else if (index == 1) {
      ui("#c1_textForSlide2").fadeIn(1500);
    }
    else if (index == 2) {
      ui("#c1_textForSlide3").fadeIn(1500);
    }
  });
  
  ui("#c1_prev").click(function(e) {
    e.preventDefault();
    carousel.prev();
  });
  
  ui("#c1_next").click(function(e) {
    e.preventDefault();
    carousel.next();
  });

  ui("#c1_play").click(function(e) {
    e.preventDefault();
    carousel.play();
  });
  
  ui("#c1_stop").click(function(e) {
    e.preventDefault();
    carousel.stop();
  });

}, true);

Carousel Events

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.

Script
webui.ready(function() {

  carousel.on("ui.carousel.change.before", function(e) {
    console.log("ui.carousel.change.before: current slide index = " + e.detail);
  });

  carousel.on("ui.carousel.change.after", function(e) {
    console.log("ui.carousel.change.after: current slide index = " + e.detail);
  });

});
Carousel Events

In order to get the new slide just moved to, you will need the ui.carousel.change.after event.