Orbit Carousel 1

Add it to your video

It runs for 6 seconds at 1920×1080. Paste this into your composition:

index.html

<div
  data-composition-id="carousel-orbit-1"
  data-composition-src="compositions/carousel-orbit-1.html"
  data-start="0"
  data-duration="6"
  data-track-index="1"
  data-width="1920"
  data-height="1080"
></div>

Move it in time with data-start. Put it on a different timeline row with data-track-index. See data attributes for the rest.

Variables

Every one of these has a default, so the piece works untouched. Set the ones you want to change on the element:

Variable	Default	Accepts	What it does
`image1`	`assets/carousel-images/artist-bob-seger.jpg`	image	Image on card 1 of 24. Any aspect; it is fitted into the card box.
`image2`	`assets/carousel-images/artist-dire-straits.jpg`	image	Image on card 2 of 24. Any aspect; it is fitted into the card box.
`image3`	`assets/carousel-images/artist-faces.jpg`	image	Image on card 3 of 24. Any aspect; it is fitted into the card box.
`image4`	`assets/carousel-images/artist-little-feat.jpg`	image	Image on card 4 of 24. Any aspect; it is fitted into the card box.
`image5`	`assets/carousel-images/artist-north-mississippi-allstars.jpg`	image	Image on card 5 of 24. Any aspect; it is fitted into the card box.
`image6`	`assets/carousel-images/artist-sea-level.jpg`	image	Image on card 6 of 24. Any aspect; it is fitted into the card box.
`image7`	`assets/carousel-images/artist-taj-mahal.jpg`	image	Image on card 7 of 24. Any aspect; it is fitted into the card box.
`image8`	`assets/carousel-images/artist-tool.jpg`	image	Image on card 8 of 24. Any aspect; it is fitted into the card box.
`image9`	`assets/carousel-images/artist-van-morrison.jpg`	image	Image on card 9 of 24. Any aspect; it is fitted into the card box.
`image10`	`assets/carousel-images/pl-10-songs.jpg`	image	Image on card 10 of 24. Any aspect; it is fitted into the card box.
`image11`	`assets/carousel-images/pl-bangers.jpg`	image	Image on card 11 of 24. Any aspect; it is fitted into the card box.
`image12`	`assets/carousel-images/pl-bhindi-bhagee.jpg`	image	Image on card 12 of 24. Any aspect; it is fitted into the card box.
`image13`	`assets/carousel-images/pl-chb-2.jpg`	image	Image on card 13 of 24. Any aspect; it is fitted into the card box.
`image14`	`assets/carousel-images/pl-chb.jpg`	image	Image on card 14 of 24. Any aspect; it is fitted into the card box.
`image15`	`assets/carousel-images/pl-homework.jpg`	image	Image on card 15 of 24. Any aspect; it is fitted into the card box.
`image16`	`assets/carousel-images/pl-sleeping.jpg`	image	Image on card 16 of 24. Any aspect; it is fitted into the card box.
`image17`	`assets/carousel-images/pl-y2k.jpg`	image	Image on card 17 of 24. Any aspect; it is fitted into the card box.
`image18`	`assets/carousel-images/track-back-together.jpg`	image	Image on card 18 of 24. Any aspect; it is fitted into the card box.
`image19`	`assets/carousel-images/track-bitter-with-the-sweet.jpg`	image	Image on card 19 of 24. Any aspect; it is fitted into the card box.
`image20`	`assets/carousel-images/track-cleaning-windows.jpg`	image	Image on card 20 of 24. Any aspect; it is fitted into the card box.
`image21`	`assets/carousel-images/track-dixie-chicken-live-at-the-rainbow-theatre-london-u.jpg`	image	Image on card 21 of 24. Any aspect; it is fitted into the card box.
`image22`	`assets/carousel-images/track-dweller-on-the-threshold.jpg`	image	Image on card 22 of 24. Any aspect; it is fitted into the card box.
`image23`	`assets/carousel-images/track-far-east-man.jpg`	image	Image on card 23 of 24. Any aspect; it is fitted into the card box.
`image24`	`assets/carousel-images/track-funky-shit.jpg`	image	Image on card 24 of 24. Any aspect; it is fitted into the card box.
`speed`	`1`	0.25 to 3, step 0.05	Time scale of the carousel motion. 1 = the designed pace.
`background`	`#EDEDEF`	color	Composition ground.

Set them with data-variable-values on the element that mounts it. These are the defaults, so this behaves exactly like the preview above until you change one:

<div
  data-composition-id="carousel-orbit-1"
  data-composition-src="compositions/carousel-orbit-1.html"
  data-variable-values='{"image1":"assets/carousel-images/artist-bob-seger.jpg","image2":"assets/carousel-images/artist-dire-straits.jpg","image3":"assets/carousel-images/artist-faces.jpg","image4":"assets/carousel-images/artist-little-feat.jpg","image5":"assets/carousel-images/artist-north-mississippi-allstars.jpg","image6":"assets/carousel-images/artist-sea-level.jpg","image7":"assets/carousel-images/artist-taj-mahal.jpg","image8":"assets/carousel-images/artist-tool.jpg","image9":"assets/carousel-images/artist-van-morrison.jpg","image10":"assets/carousel-images/pl-10-songs.jpg","image11":"assets/carousel-images/pl-bangers.jpg","image12":"assets/carousel-images/pl-bhindi-bhagee.jpg","image13":"assets/carousel-images/pl-chb-2.jpg","image14":"assets/carousel-images/pl-chb.jpg","image15":"assets/carousel-images/pl-homework.jpg","image16":"assets/carousel-images/pl-sleeping.jpg","image17":"assets/carousel-images/pl-y2k.jpg","image18":"assets/carousel-images/track-back-together.jpg","image19":"assets/carousel-images/track-bitter-with-the-sweet.jpg","image20":"assets/carousel-images/track-cleaning-windows.jpg","image21":"assets/carousel-images/track-dixie-chicken-live-at-the-rainbow-theatre-london-u.jpg","image22":"assets/carousel-images/track-dweller-on-the-threshold.jpg","image23":"assets/carousel-images/track-far-east-man.jpg","image24":"assets/carousel-images/track-funky-shit.jpg","speed":1,"background":"#EDEDEF"}'
></div>

Tagged carousel gallery images showcase orbit 3d.Created by Jake Moran.

Catalog

Add it to your video

Variables

Related topics