JSFiddle - React, Tailwind, and code Playground
by Shirly Manor
HTML
<script src="https://product-gallery.cloudinary.com/all.js" type="text/javascript">
</script>
<div id="my-gallery" style="max-width:80%">
</div>JavaScript
const myGallery = cloudinary.galleryWidget({
container: '#my-gallery',
cloudName: 'dcfibe2m3',
mediaAssets: [
{
tag: 'TT662US',
mediaType: 'image'
},
{
tag: 'TT662US',
mediaType: 'video',
transformation: {
background: '#FFFFFF', // only relevant for pad crop mode
crop: 'pad', // only fill or pad mode is supported
dpr: 2,
duration: 100
}
}
],
imageBreakpoint: 200,
themeProps: {
'onPrimary': '#ff7380',
'active': '#FA3468'
},
videoProps: {
controls: true
},
carouselOffset: 50,
thumbnailProps: {
spacing: 30,
width: 50,
height: 50,
selectedBorderPosition: 'all'
},
transition: 'fade',
viewportBreakpoints: [
{
breakpoint: 984,
carouselStyle: 'thumbnails',
carouselLocation: 'bottom'
},
{ breakpoint: 300,
carouselStyle: 'indicators',
carouselLocation: 'bottom',
navigation: 'always'
}
]
});
myGallery.render()