Documentation

Class

Carousel

kiss.ui.Carousel(config)

The Carousel component derives from Component.

It displays a list of images with automatic sliding.

Constructor
Parameters:
Name Type Attributes Description
config object
images Array.<string>

List of image src
width string | number <optional>

Any valid CSS width value
height string | number <optional>

Any valid CSS height value
delay number <optional>

Auto slide delay in milliseconds (default = 3000)
showArrows boolean <optional>

Display left/right arrows on hover
zoomable boolean <optional>

Enable zoom on active image click
zoomWidth string | number <optional>

Zoomed image width (default = 100%)
zoomHeight string | number <optional>

Zoomed image height (default = 100%)
zoomShadow string <optional>

Box shadow applied to zoomed image

View Source client/ui/elements/carousel.js, line 30

this

Generated markup

<a-carousel class="a-carousel">
 <div class="carousel-track">
     <img class="carousel-image carousel-image-active">
 </div>
 <span class="carousel-arrow carousel-arrow-left fas fa-chevron-left"></span>
 <span class="carousel-arrow carousel-arrow-right fas fa-chevron-right"></span>
</a-carousel>

Methods

# goTo(index, isAutoopt, transitionAnimationopt)

Go to an image by index

Parameters:
Name Type Attributes Default Description
index number

Target index
isAuto boolean <optional>
 false

True when called by automatic rotation
transitionAnimation string <optional>

View Source client/ui/elements/carousel.js, line 157

this

# next(isAutoopt)

Go to the next image

Parameters:
Name Type Attributes Default Description
isAuto boolean <optional>
 false

True when called by automatic rotation

View Source client/ui/elements/carousel.js, line 136

this

# previous()

Go to the previous image

View Source client/ui/elements/carousel.js, line 145

this

# setDelay(delay)

Update auto slide delay

Parameters:
Name Type Description
delay number

View Source client/ui/elements/carousel.js, line 203

this

# setHeight(height)

Set carousel height

Parameters:
Name Type Description
height *

A valid CSS height value

View Source client/ui/elements/carousel.js, line 261

this

# setImages(images)

Update images list

Parameters:
Name Type Description
images Array.<string>

View Source client/ui/elements/carousel.js, line 187

this

# setWidth(width)

Set carousel width

Parameters:
Name Type Description
width *

A valid CSS width value

View Source client/ui/elements/carousel.js, line 249

this

# setZoom(zoomStateopt)

Set zoom state

Parameters:
Name Type Attributes Default Description
zoomState boolean <optional>
 true

View Source client/ui/elements/carousel.js, line 217

this

# start()

Start the automatic image rotation

View Source client/ui/elements/carousel.js, line 112

this

# stop()

Stop the automatic image rotation

View Source client/ui/elements/carousel.js, line 124

this

# toggleZoom()

Toggle zoom state

View Source client/ui/elements/carousel.js, line 239

this