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 ($37/month or $399 one-time).

Already a member? Log in below or here.

Need help implementing a tutorial in your site or want to hire me for custom work?

HIRE ME

Find the article helpful and wish to donate?

DONATE

Comments

For adding code blocks wrap the code in three backticks. Markdown should work.
Provide a URL of your site/webpage if something is not working.

6 comments on “Parallax Slider in Oxygen Using Repeaters & Flickity”

  1. are there errors with the documentation? you write class ‘carousel-item’. but you dont have this class in the css.
    also you dont explain very well some essential details. A video tutorial is a must here.

  2. Please can you make this clear : 1. Repeater element, must we select then acf repeter? 2.i nner carousel div, the image element is just an image? or a dynamic acf element and what?

    1. Hi, I’ve updated the tutorial to answer your questions by explaining it in more detail. There was indeed was a mistake in one of the class names, sorry about that. I’ll answer also here..

      Yes, ACF repeater must be selected for the repeater to retreive the date from our ACF repeater fields we created.
      In the example, the URL for the image component is taking from the ‘image’ fields we made at the beginning of the tutorial. The text element gets the data from the ‘description’ field. It needs to be dynamic like this otherwise every item in the repeater would have the same text and image.

  3. When adding the CSS to a stylesheet, it works fine. But if you put the CSS in a code block, the slider is all messed up, untill you re-size the window…then it works! any idea as to why this happens?

    1. I don’t recommend using code blocks for CSS. It can cause issues like this and also can cause FOUC where the html is displayed before the CSS has loaded. (because code blocks output CSS at the footer of the page, not the head) The only benefit to using code blocks for CSS is the tiny performance improvement as the CSS will only be loaded on that one page or template, not site wide. But IMO it’s not worth it for the bigger issues it causes.

magnifiercross
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: