Bootstrap carousel slider integration with ACF- REPEATER & Wordpress

//First, Install acf repeater plugin for this

<div class="container-fluid hbanner">
    
   <div class="carousel fade-carousel slide" data-ride="carousel" data-interval="4000" id="bs-carousel">
       <!-- Overlay -->
       <!-- <div class="overlay"></div> -->
       <!-- Indicators -->
       
      <ol class="carousel-indicators">
             <?php
                 $i=0;            
                 while( have_rows('slider_repeater') ): the_row();            
                 if ($i == 0) {            
               echo '<li data-target="#bs-carousel" data-slide-to="0" class="active"></li>';            
               } else {            
               echo '<li data-target="#bs-carousel" data-slide-to="'.$i.'"></li>';            
               }            
               $i++;            
            endwhile; ?>
           <!--    <li data-target="#bs-carousel" data-slide-to="2"></li> -->          
      </ol>
       
       <!-- Wrapper for slides -->
       
      <div class="carousel-inner">
           <?php
              $z = 0;            
              while( have_rows('slider_repeater') ): the_row();            
              $slider_image = wp_get_attachment_image_src(get_sub_field('slider_image'), 'full'); ?>       
            
         <div class="item slides <?php if ($z==0) { echo 'active';} ?>">
                 
            <div class="slide-1" style="background-image: url(<?php the_sub_field('slider_image'); ?>); "></div>
                 
            <div class="hero">
                      
               <hgroup>                             
                  <h1><?php the_sub_field('slider_heading');?></h1>   
                  <h3><?php the_sub_field('slider_sub_heading');?></h3>
               </hgroup>
                      <a class="btn btn-hero btn-lg" href="<?php the_sub_field('slider_button_url'); ?>"><?php the_sub_field('slider_button_text'); ?></a>
           </div>
               
         </div>
            <?php
               $z++;           
               endwhile; ?>
      </div>
   </div>
</div>

Comments

Popular posts from this blog

datatable with both top and bottom scroll bar.

Display Loader and disable page while waiting for ajax request

Remove GIT integration from VSCode