To create a Bootstrap carousel slider using Advanced Custom Fields (ACF) in WordPress, follow these steps:
- Install and activate the ACF plugin on your WordPress site.
- Create a new ACF field group by navigating to Custom Fields -> Add New in your WordPress admin dashboard.
- Give your field group a title and add a new field of type “Repeater”. This will allow you to create multiple slides for the carousel.
- Inside the repeater field, add the necessary sub-fields for each slide. For example, you can add a text field for the slide title, a textarea field for the slide content, and an image field for the slide image.
- Save the field group.
- Now, go to the post or page where you want to display the carousel slider and edit the content.
- Inside the content editor, add a new ACF field block by clicking on the “+” icon and selecting the “ACF” block.
- In the ACF block settings, choose the field group you created earlier and select the desired layout. For the carousel slider, you can choose the “Repeater” layout.
- Save the changes and preview the page to see the carousel slider in action.
- To display the carousel slides using the Bootstrap carousel component, you can use the following code:
PHP Code
<div id="EngineeringPowerhouseSlider1" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<?php if( have_rows('engineering_power_house_section_1_slider') ): ?>
<?php while( have_rows('engineering_power_house_section_1_slider') ) : the_row(); ?>
<div class="carousel-item">
<div class="row align-items-center">
<div class="col-md-6 wow slideInLeft">
<img class="img-fluid" src="<?php the_sub_field('images'); ?>" alt="">
</div>
<div class="col-md-6 wow slideInRight">
<div class="home-section-5-sub-1">
<img class="img-fluid" src="<?php the_sub_field('logo'); ?>" alt="">
<h3><?php the_sub_field('heading'); ?></h3>
<p><?php the_sub_field('description'); ?></p>
<?php if( have_rows('button') ): ?>
<?php while( have_rows('button') ) : the_row(); ?>
<a href="<?php the_sub_field('button_link'); ?>" class="btn arrow"><?php the_sub_field('button_heading'); ?></a>
<?php endwhile; ?>
<?php endif; ?>
</div>
</div>
</div>
</div>
<?php endwhile; ?>
<?php endif; ?>
</div>
<div class="carousel-indicators">
<?php $dot = 0; if( have_rows('engineering_power_house_section_1_slider') ): ?>
<?php while( have_rows('engineering_power_house_section_1_slider') ) : the_row(); ?>
<button type="button" data-bs-target="#EngineeringPowerhouseSlider1" data-bs-slide-to="<?php echo $dot; ?>" class="" aria-current="true" aria-label="Slide <?php echo $dot; ?>"><i class="bi bi-square-fill"></i></button>
<?php $dot++; endwhile; ?>
<?php endif; ?>
</div>
</div>
Query Code
$('#EngineeringPowerhouseSlider1 .carousel-item').first().addClass('active');
$('#EngineeringPowerhouseSlider1 .carousel-indicators button').first().addClass('active');
