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

Invalid bean property or is not readable to loading Jsp page