Carousel

This extension generates a Bootstrap Carousel using all images matching a given glob pattern. Page variables to be used for the image's captions will be created automatically by the extension and follow the naming pattern carousel_caption_FILE.

@x(Carousel{ Options })

Dependencies

This extension requires Bootstrap's style sheets and Javascript library as well as jQuery to be included. This can easily be done with @t(jquery), @t(bootstrapCSS) and @t(bootstrapJS) like this:

<head>
    ...
    <!-- jQuery has to be included before Bootstrap -->
    @t(jquery)
    @t(bootstrapCSS)
    @t(bootstrapJS)
    ...
</head>

Options

files: "*.jpg" - string

Filenames or pattern to select files. Multiple files/patterns can be defined, separated by comma.
For example: files: "image1.jpg, image2.jpg, *.png"

width: 400 - integer

Image width in pixels for resizing.

height: 300 - integer

Image height in pixels for resizing.

fullscreen: false - boolean

If true, the carousel covers 100% width and height of the parent element. The parameters width and height are still needed to determine the resolution of the spanning images.

A fullscreen Carousel requires "html" and "body" to have 100% height!

order: false - string or false

Change the order of the images. Possible values are:

  • false - keep original order
  • "asc" - ascending
  • "desc" - descending

duration: 3000 - integer

Duration in milliseconds.

controls: true - boolean

Enable/disable controls.


Example

A carousel, 850 x 450 px and a page variable for the file pattern or list

<head>
    ...
    <!-- Include all dependencies -->
    @t(jquery)
    @t(bootstrapCSS)
    @t(bootstrapJS)
    ...
</head>
<body>
    ...
    <div class="carousel_wrapper">
        @x(Carousel {
            files: @p(carousel_files), 
            width: 850, 
            height: 450
        }) 
    </div>
    ...
</body>
See also