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>

Did this answer your question?