Carousel

Carousel

If given enough width, this carousel will show 5 images, 2 on each side of the one in focus. You can see that if you preview internally in Site Designer.

In Site Designer it looks a bit 'off' in that you just see one image which has too much width and not enough height.You actually have to set the dimensions for the carousel in the little java script you'll find when you select the container .carousel and click on the Element tab. There you will find the width and height, and they have values with vw units. Those values represent the aspect ratio of the images, and they can be edited to fit your needs. The main image in the app will not change, but once you preview, you will see the result. 

One thing to be aware of: If you have other images on the same page as the carousel, they should better be placed as background images in containers. The above mentioned java script addresses the 'picture' element in order to make the carousel work, so any other images would also be affected size wise. As background images in a container that does not happen.

There is also a hidden html element containing some java script to make the carousel move. The timing is set to change every 4 seconds. This can be edited.

Download this component