Vev Help Center
Searchโ€ฆ
Create a responsive Slideshow
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
1
import React from 'react'
2
import "react-responsive-carousel/lib/styles/carousel.min.css";
3
import { Carousel } from 'react-responsive-carousel';
4
import { useSize, Image } from 'vev';
5
โ€‹
6
// Define a set of stock URLs to use when no images are supplied
7
const imageUrls = [
8
'https://picsum.photos/2048/1156',
9
'https://picsum.photos/2048/1157',
10
'https://picsum.photos/2048/1158',
11
]
12
โ€‹
13
export default function MyResponsiveCarousel(props: Props) {
14
// Get width and height of the container, resizes carousel
15
// when in the editor.
16
const { width, height } = useSize(props.hostRef);
17
โ€‹
18
return (
19
<div className="fill">
20
<Carousel width={width} height={height} dynamicHeight={true}>
21
{
22
imageUrls.map((url, i) => <div style={{height : height}}>
23
<Image src={imageUrls[i]} />
24
<p className="legend">Legend {i+1}</p>
25
</div>)
26
}
27
</Carousel>
28
</div>
29
);
30
};
31
โ€‹
Copied!
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:
1
<ArrayField name="images">
2
<ImageField name="img" />
3
</ArrayField>
Copied!
Last modified 2mo ago
Copy link