WebUI mobile-first CSS

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-sm border-secondary">
      <img src="images/landscape_1.jpg" />
    </div>
    <div class="carousel-item border-sm border-secondary">
      <img src="images/landscape_2.jpg" />
    </div>
    <div class="carousel-item border-sm border-secondary">
      <img src="images/landscape_3.jpg" />
    </div>
    <div class="carousel-item border-sm border-secondary">
      <img src="images/landscape_4.jpg" />
    </div>
    <div class="carousel-item border-sm border-secondary">
      <img src="images/landscape_5.jpg" />
    </div>
    <div class="carousel-item border-sm border-secondary">
      <img src="images/landscape_6.jpg" />
    </div>
  </div>
  <div class="text text-bold">
    <a href="" id="c1_prev" class="text-xl background-transparent color-light fa fa-step-backward place-middle-left left-xs"></a>
    <a href="" id="c1_next" class="text-xl background-transparent color-light fa fa-step-forward place-middle-right right-xs"></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.