ACF repeater slider with Splide.js and Oxygen Builder

2 min read / Custom Code, Oxygen Builder, Plugins, WordPress / Share on: Twitter, LinkedIn, Facebook

Post summary: 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 Install ACF and create Field…

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

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

Add slider content

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

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>

0 comments