Carousel

less than 1 minute read

References

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"
        }
    ]
});

React

import * as React from "react";
import { Carousel } from "gd-sprest-bsx";

export class IDemo extends React.Component {
    // Render the component
    render() {
        return (
            <Carousel
                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"
                    }
                ]}
            />
        );
    }
}

VueJS

<template>
    <Carousel
        enableControls="true" enableIndicators="true"
        id="carouselDemo" v-bind:items="carouselItems"
    />
</template>

<script>
import { Carousel } from "gd-sprest-bs-vue";
export default {
    components: { Carousel },
    data() {
        return {
            carouselItems: [
                {
                    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"
                }
            ]
        };
    }
}
</script>

Code Playground