Let’s add an npm package to quickly create a responsive slideshow. Click on Add dependency in your file structure, or open your package.json file to add it under dependencies.
Add the package https://www.npmjs.com/package/react-responsive-carousel by leandrowd and press CMD+S to save your file and compile your new dependencies
Returned to the Code Editor dashboard and click on New Section to create a Section Element.
Add the following basic structure to our Slideshow to get us started.
import React from 'react'
import "react-responsive-carousel/lib/styles/carousel.min.css";
import { Carousel } from 'react-responsive-carousel';
import { useSize, Image } from 'vev';
// Define a set of stock URLs to use when no images are supplied
const imageUrls = [
'https://picsum.photos/2048/1156',
'https://picsum.photos/2048/1157',
'https://picsum.photos/2048/1158',
]
export default function MyResponsiveCarousel(props: Props) {
// Get width and height of the container, resizes carousel
// when in the editor.
const { width, height } = useSize(props.hostRef);
return (
<div className="fill">
<Carousel width={width} height={height} dynamicHeight={true}>
{
imageUrls.map((url, i) => <div style={{height : height}}>
<Image src={imageUrls[i]} />
<p className="legend">Legend {i+1}</p>
</div>)
}
</Carousel>
</div>
);
};
Hit ⌘+S or CTRL+S to save your code. Your Element preview should now show a functioning Slideshow.
Let’s customize this Slideshow by using some of Vev’s best features.
Customizing the Slideshow
To make the Slideshow more re-usable in other projects or by your team members, we’ll do a few quick improvements:
Add an Image field to your form, so users can upload or add images from their library.
Make the Caption text and size styles editable in the Elements Style Panel
Make the Slideshow arrows editable from the Elements Icons.
Adding the Image Field
To let you add/remove images to the Slideshow from its form, we need to add a field to the Elements form.tsx. Since we want to be able to add multiple images, we need to wrap the ImageField in an ArrayField like so:
<ArrayField name="images">
<ImageField name="img" />
</ArrayField>