Here is how to create a Bootstrap 4 carousel slider of images with ACF Pro Repeater field in WordPress.

There are a few options in that the Bootstrap carousel can be plain, add navigation and add a caption, 4 examples can be seen below in the demo lower in the post.

 

Create the ACF Repeater fields for Bootstrap carousel.

Bootstrap Carousel Acf

 

Here an image and text field are created, assign the field group to a post or page and populate the repeater rows.

Acf Populate Carousel Fields

Add the ACF Repeater Bootstrap Carousel Code

https://gist.github.com/neilgee/d4a4c1c3de098cc34cad34208f6158e7#file-carousel-php

https://gist.github.com/neilgee/d4a4c1c3de098cc34cad34208f6158e7#file-carousel-nav-php

https://gist.github.com/neilgee/d4a4c1c3de098cc34cad34208f6158e7#file-carouse-nav-indicators-php

https://gist.github.com/neilgee/d4a4c1c3de098cc34cad34208f6158e7#file-carousel-caption-php
https://gist.github.com/neilgee/d4a4c1c3de098cc34cad34208f6158e7#file-carousel-thumbnails-php

There are 5 code snippets above, expand the links to see the code, they are a plain carousel slider, a slider with navigation and indicators and carousel with text captions, the PHP counter increment variable is used throughout.
Ensure you have unique IDs per slider.

Add more options to the slider either via data attributes or Javascript.

7 Comments

  1. Nuno on September 21, 2020 at 9:14 pm

    For example if we have multiple repeaters on the same page in flexible content and we need unique ID’s for each block

  2. Nuno on September 21, 2020 at 8:44 pm

    Great tutorial. If we want to use the element twice (ACF page builder) in the same page how can we do that? The data-target will use the IDs and it wont work. Could you please give me some guidance?

  3. Tibow on May 9, 2020 at 5:48 pm

    Thank you it works perfectly. I did it with Relationship field from ACF ;)

  4. Dan on April 17, 2020 at 1:37 pm

    Thank you very much <3

  5. Yoan on November 5, 2019 at 3:20 pm

    Your the best thank you ! Great Work :)

  6. Thiện on November 5, 2019 at 2:42 am

    Can you show for me demo, Thanks so much

    • Neil Gowran on November 5, 2019 at 5:35 am

      The demo is near the bottom of the post

Leave a Comment