Vimeo Carousel

Description

09.26c10v2 Vimeo Carousel

1. Install Code

#1.1. First add Section > Choose Team > Choose Section with auto layout icon

09.26c10v2 Youtube Carousel

#1.2. Hover on top right of section > Click EDIT SECTION

09.26c10v2 Youtube Carousel

#1.2-2. at Format > Anchor Link > enter word: video-carousel

09.26c10v2 Youtube Carousel

#1.3. Hover on top right of section > Click EDIT CONTENT

09.26c10v2 Youtube Carousel

#1.3-2. at Design > Choose Carousel

09.26c10v2 Youtube Carousel

#1.3-2. Next, make sure you enabled Image + Button. With other elements (title, body..) you can enable if you want

09.26c10v2 Youtube Carousel

#1.4. Next, click Content to enter text, video url

09.26c10v2 Youtube Carousel

#1.4-2. Enter Vimeo Video URL in Button

09.26c10v2 Vimeo Carousel

#1.5. Hover on Page where you use Carousel > Click Gear icon

09.26c10v2 Vimeo Carousel

#1.6. Click Advanced > Paste this code

<!-- 09.26c10v2 Vimeo Carousel -->
<script>
  window.VimeoCarouselConfig = {
    sectionKeywords: 'video-carousel, video-grid',
    hideImage: true,
    hideButton: false,
    showControls: true,
    playIconSize: 48,
    playIconColor: '#ffffff'
  };
</script>
<script src="https://code.beaverhero.com/listcarousel/0926c10v2vimeocarousel.js"></script>

09.26c10v2 Vimeo Carousel

#2. Customize

#2.1. Option in Line 05

hideImage: true,

If you set it false

hideImage: false,

it will show featured image + play icon over image

09.26c10v2 Vimeo Carousel

#2.2. To adjust play icon style, change line 08, 09

playIconSize: 48,
    playIconColor: '#ffffff'

 

Buy me a coffee