JSFiddle - React, Tailwind, and code Playground

by sambrace

JavaScript

const myWidget = cloudinary.galleryWidget({
    "container": "#product-gallery",
    "cloudName": "demo",
    "mediaAssets": [{
        "tag": "electric_car_product_gallery_demo",
        "mediaType": "image"
    }, {
        "tag": "electric_car_product_gallery_demo",
        "mediaType": "video"
    }, {
        "tag": "electric_car_360_product_gallery_demo",
        "mediaType": "spin"
    }],
    "carouselStyle": "thumbnails",
    "carouselLocation": "bottom",
    "navigation": "none",
    "aspectRatio": "16:9",
    "thumbnailProps": {
        "width": 120,
        "height": 96,
        "mediaSymbolPosition": "center",
        "mediaSymbolBgShape": "radius",
        "selectedStyle": "all",
        "selectedBorderColor": "#d0021b",
        "selectedBorderPosition": "all",
        "mediaSymbolBgOpacity": 0.8
    },
    "zoom": true,
    "zoomProps": {
        "level": 2.5
    },
    "themeProps": {
        "primary": "#d0021b",
        "onPrimary": "#ffffff",
        "active": "#d0021b"
    },
    "transition": "fade",
    "viewportBreakpoints": [{
        "breakpoint": 576,
        "navigation": "always",
        "carouselStyle": "indicators",
        "carouselLocation": "bottom",
        "onPrimary": "#d0021b",
        "navigationProps": {
            "iconColor": "#d0021b"
        },
        "indicatorProps": {
            "selectedColor": "#d0021b",
            "color": "#E7808D"
        }
    }]
});
myWidget.render();