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 $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

You need to be logged in to view and post comments.
Not a member yet? Join here.
magnifiercross
>
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: