@cimpress/react-components/dist/esm/docs/components/carousel/carousel.js

React components to support the MCP styleguide

import React from 'react';
import { Carousel } from '@cimpress/react-components';
/* eslint-disable jsx-a11y/alt-text */
const CarouselDemo = () => (React.createElement("div", null,
    React.createElement("div", { className: "row" },
        React.createElement("div", { className: "col-md-6" },
            React.createElement("h5", null, "Small carousel with thumbnails"),
            React.createElement(Carousel, { size: "s", showZoomOverlay: true },
                React.createElement("img", { src: "//via.placeholder.com/600x600/4286f4/ffffff" }),
                React.createElement("img", { src: "//via.placeholder.com/400x600/ffc83d/ffffff" }),
                React.createElement("img", { src: "//via.placeholder.com/600x500/d62896/ffffff" }),
                React.createElement("img", { src: "//via.placeholder.com/600x300/28d696/ffffff" }),
                React.createElement("img", { src: "//via.placeholder.com/300x600/96d628/ffffff" }),
                React.createElement("img", { src: "//via.placeholder.com/400x600/ffc83d/ffffff" }),
                React.createElement("img", { src: "//via.placeholder.com/600x500/d62896/ffffff" }),
                React.createElement("img", { src: "//via.placeholder.com/600x300/28d696/ffffff" }))),
        React.createElement("div", { className: "col-md-6" },
            React.createElement("h5", null, "Medium carousel in landscape mode"),
            React.createElement(Carousel, { size: "m", landscape: true },
                React.createElement("img", { src: "//via.placeholder.com/600x600/4286f4/ffffff" }),
                React.createElement("img", { src: "//via.placeholder.com/400x600/ffc83d/ffffff" }),
                React.createElement("img", { src: "//via.placeholder.com/600x500/d62896/ffffff" }),
                React.createElement("img", { src: "//via.placeholder.com/600x300/28d696/ffffff" }),
                React.createElement("img", { src: "//via.placeholder.com/300x600/96d628/ffffff" })))),
    React.createElement("div", { className: "row" },
        React.createElement("div", { className: "col-md-4" },
            React.createElement("h5", null, "Minimal carousel at 100px"),
            React.createElement(Carousel, { minimal: true, pxSize: 100, showZoomOverlay: true },
                React.createElement("img", { src: "//via.placeholder.com/600x600/4286f4/ffffff" }),
                React.createElement("img", { src: "//via.placeholder.com/400x600/ffc83d/ffffff" }),
                React.createElement("img", { src: "//via.placeholder.com/600x500/d62896/ffffff" }),
                React.createElement("img", { src: "//via.placeholder.com/600x300/28d696/ffffff" }),
                React.createElement("img", { src: "//via.placeholder.com/300x600/96d628/ffffff" }))),
        React.createElement("div", { className: "col-md-4" },
            React.createElement("h5", null, "Extra small carousel with no slides"),
            React.createElement(Carousel, { size: "xs" })),
        React.createElement("div", { className: "col-md-4" },
            React.createElement("h5", null, "Extra small carousel in a loading state"),
            React.createElement(Carousel, { loading: true, size: "xs" })))));
export default CarouselDemo;
//# sourceMappingURL=carousel.js.map