12% off of LTD using this coupon: TWELVEPERCENTOFF. Promo ends on 2 Dec midnight UTC.
Published on Feb 28, 2022

Custom Vimeo Video Carousel using Swiffy Slider in Oxygen

Sridhar Katakam

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:

This is a premium members-only content.

To view the rest of the content, please sign up for membership ($47/month or $599 one-time).

Already a member? Log in below or here.

tagschevron-leftchevron-rightchainangle-rightangle-upangle-downfolder-omagnifiercrossmenuchevron-downarrow-right