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.
![](https://wpdevdesign.com/wp-content/uploads/2019/12/parallax-slider-oxygen-1024x575.jpg)
For this tutorial, we'll be using
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.
![](https://wpdevdesign.com/wp-content/uploads/2019/12/gallery-field-group-1024x751.jpg)
On the page edit screen we can add the images and descriptions for the slider;
![](https://wpdevdesign.com/wp-content/uploads/2019/12/acf-repeater-fields-1024x600.jpg)
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.