Carousel

Documentation

JavaScript

var Components = require("gd-sprest-bs").Components;

// Create the carousel
var el = document.querySelector("#carousel");
var carousel = Components.Carousel({
    el: el,
    enableControls: true,
    enableIndicators: true,
    id: "carouselDemo",
    items: [
        {
            captions: "<h5>First Slide</h5>",
            imageUrl: "https://via.placeholder.com/400x200",
            imageAlt: "First Slide",
            isActive: true
        },
        {
            captions: "<h5>Second Slide</h5>",
            imageUrl: "https://via.placeholder.com/400x200",
            imageAlt: "Second Slide"
        },
        {
            captions: "<h5>Third Slide</h5>",
            imageUrl: "https://via.placeholder.com/400x200",
            imageAlt: "Third Slide"
        }
    ]
});

TypeScript

import { Components } from "gd-sprest-bs";

// Create the carousel
let el = document.querySelector("#carousel");
let carousel = Components.Carousel({
    el: el,
    enableControls: true,
    enableIndicators: true,
    id: "carouselDemo",
    items: [
        {
            captions: "<h5>First Slide</h5>",
            imageUrl: "https://via.placeholder.com/400x200",
            imageAlt: "First Slide",
            isActive: true
        },
        {
            captions: "<h5>Second Slide</h5>",
            imageUrl: "https://via.placeholder.com/400x200",
            imageAlt: "Second Slide"
        },
        {
            captions: "<h5>Third Slide</h5>",
            imageUrl: "https://via.placeholder.com/400x200",
            imageAlt: "Third Slide"
        }
    ]
});

Web Component

// Return the carousel properties return { items: [ { captions: "
First Slide
", imageUrl: "https://via.placeholder.com/400x200", imageAlt: "First Slide", isActive: true }, { captions: "
Second Slide
", imageUrl: "https://via.placeholder.com/400x200", imageAlt: "Second Slide" }, { captions: "
Third Slide
", imageUrl: "https://via.placeholder.com/400x200", imageAlt: "Third Slide" } ] };
<script type="text/javascript" src="https://unpkg.com/gd-sprest-bs/wc/dist/gd-sprest-bs.js"></script>
<bs-carousel id="wcCarouselDemo" enable-controls="true" enable-indicators="true">
    // Return the carousel properties
    return {
        items: [
            {
                captions: "<h5>First Slide</h5>",
                imageUrl: "https://via.placeholder.com/400x200",
                imageAlt: "First Slide",
                isActive: true
            },
            {
                captions: "<h5>Second Slide</h5>",
                imageUrl: "https://via.placeholder.com/400x200",
                imageAlt: "Second Slide"
            },
            {
                captions: "<h5>Third Slide</h5>",
                imageUrl: "https://via.placeholder.com/400x200",
                imageAlt: "Third Slide"
            }
        ]
    };
</bs-carousel>

References

Carousel(props:ICarouselProps):ICarousel

ICarousel

Name Returns Description
cycle () => void Cycles through the carousel items from left to right.
dispose () => void Destroys an element’s tab.
el Element The jquery element.
next () => void Cycles to the next item.
number (value:number) => void Cycles the carousel to a particular frame.
pause () => void Stops the carousel from cycling through items.
previous () => void Cycles to the previous item.

ICarouselItem

Name Returns Description
captions string The item’s captions.
className string The class name to apply to the item.
content string The item’s content.
imageAlt string The image image ‘alt’ property.
imageUrl string Renders an image element.
isActive boolean Adds the ‘active’ class.

ICarouselOptions

Name Returns Description
interval number The amount of time to delay between automatically cycling an item.
keyboard boolean Whether the carousel should react to keyboard events.
pause string | boolean If set to “hover”, pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave. If set to false, hovering over the carousel won’t pause it.
ride string Autoplays the carousel after the user manually cycles the first item.
wrap boolean Whether the carousel should cycle continuously or have hard stops.

ICarouselProps

Name Type Description
className string The class name to apply to carousel.
el HTMLElement The element to render the carousel to.
enableControls string The carousel content.
enableCrossfade string The carousel header.
enableIndicators string Renders the carousel as an anchor element instead of a span element.
id boolean Adds the ‘carousel-pill’ class name.
items number The carousel type. Reference the CarouselTypes enumerator
options number The carousel type. Reference the CarouselTypes enumerator