Thursday, April 14, 2022
The Great Tit
Updated: 14. 4. 2022, Added: 14. 4. 2022

ACF repeater slider with Splide.js and Oxygen Builder

Custom slider with ACF repeater and Splide.js

If you want to create custom slider, you may take some 3rd party js library. I will use the Splide.js in this tutorial, but you can also use flickity or other. I will also use Oxygen WordPress builder, but this can be done with every theme.

Create ACF repeater field

  1. Install ACF and create Field group
  2. Add repeater field
  3. Add Text, Image and URL field in repeater
  4. Set Image field return format to ID
ACF repeater in field group
ACF Image return format

Select page or post, where this field group should be displayed

Assign ACF field group to the post/page/taxonomy...

Add slider content

Open post or page which you assigned to the field group and add slider content.

ACF repeater slider fields

Create ACF slider in Oxygen Builder's Code Block

  1. Create Code block
  2. Add Splide.js configuration to the JavaScript section of Code Block
  3. Add HTML and PHP code to the PHP section of Code Block
  4. Change the slugs of ACF Fields in the PHP code to your ones
  5. Edit the splide.js options to match your needs
(function ($) {
	$(document).ready(function(){

		if(window.angular) return;
			
		new Splide( '.splide', { //change the splide options here
			perPage: 1,
			height:'500px',
			gap: '30px',
		} ).mount();
	});
})(jQuery);
<div class="splide col-span--2 col-span--l-1">
  <div class="splide__track">
	  <ul class="splide__list">
<?php

// Check rows exists.
if( have_rows('slider') ): //slider = your ACF repeater field slug

    // Loop through rows.
    while( have_rows('slider') ) : the_row(); //slider = your ACF repeater field slug

        // Load sub field value.
        $text = get_sub_field('slide_text');
		$image = get_sub_field('slide_image');
		$size = 'full'; // (thumbnail, medium, large, full or custom size)
		$link = get_sub_field('slide_link');
        // Do something...
		  ?>
		  <li class="splide__slide">
			  <a href="<?=$link?>">
			  <?=wp_get_attachment_image( $image, $size )?>
			  <h2><?=$text?></h2>
			  </a>
		  </li>
		  <?php

    // End loop.
    endwhile;

// No value.
else :
    // Do something...
endif;
	  ?>
	  </ul>
  </div>
</div>
Did I help you? Fuel our WordPress journey
Beep this article to your friends!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram