Custom Vimeo Video Carousel using Swiffy Slider in Oxygen

This members-only tutorial provides the steps to set up a slider/carousel of Vimeo-hosted videos with the videos playing in a lightbox on click when using Oxygen.

We shall

• register a video CPT with an associated video_url custom field so each CPT item can have a Vimeo video associated with it
• add a few CPT items
• load the CSS and JS files of Swiffy Slider
• write a custom WP_Query to pull 10 latest videos and
  • for each get the post thumbnail and if not present, fetch the video thumb from Vimeo
  • for each generate a card with the image with a play button overlay linking to the video URL, item title and item excerpt
  • ensure that the HTML markup is in the format necessary for Swiffy
• add custom JS for adding and removing a hovered class when the mouse moves over and away on the card header
• add custom CSS to add a smooth transition so the card to move up when the card header is hovered plus more

Step 1

Register a video CPT using a plugin like CPT UI or Meta Box.

Create a field group to appear on video CPT entries using a plugin like ACF or Meta Box.

Add a URL-type field having the name/ID of video_url.

Step 2

Populate the video post type entries.

If you would like to set a custom thumb for the videos in the slider, set it as featured image.

Populate the video URL field with Vimeo URLs in this format:

https://vimeo.com/656704401

Step 3

Load and initialize Swiffy Slider.

Install and activate Code Snippets plugin.

Go to Snippets > Add New.

Title: Load and init Swiffy

Code: