12% off of LTD using this coupon: TWELVEPERCENTOFF. Promo ends on 2 Dec midnight UTC.
Published on Jan 29, 2020

Parallax Slider in Oxygen Using Repeaters & Flickity

David Browne

In this premium tutorial, we'll look at creating a custom slider with a parallax effect. This can be very useful for accommodation sites, real estate or whenever you need to allow the user to quickly flick through some high-quality images directly on the page, without needing to open up a lightbox.

Live Demo

For this tutorial, we'll be using

  1. Oxygen (at least v3)
  2. Flickity (a JS slider library)

Using Oxygen's Repeater Component

Implementing this slider on a repeater element means we can use re-use this for anything, featured pages, posts or anything you like inside coming from ACF repeater fields.

In the demo, I'm using ACF repeater fields on a page, with an image field and text field. You can add whatever you like to the slides. The image field will need to be set as image URL, not array.

On the page edit screen we can add the images and descriptions for the slider;

Use Repeater to Build One Slide

First, we add a repeater component inside a section.

Then add a class to the repeater of 'carousel'.

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