Support

Account

Register Login

Home › Forums › Add-ons › Repeater Field › Carousel using repeater field

Solved

Carousel using repeater field

  • I am using the repeater field to create a carousel. Basically showing an image and text. I need to loop by showing only one set (image and text) and then repeat for the rest. My code is below, notice “item active”. This needs to be first and then the rest are just “item”. This is why I need to loop the first carousel, and then the rest. My code below, thanks in advance.

    	<?php if(get_field('slideshow_images')): ?>
    <div id="myCarousel" class="carousel slide carousel_banner">
      <div class="carousel-inner">
		<?php while(the_repeater_field('slideshow_images')): ?>
        <div class="item active" style="background-image: url(<?php the_sub_field('image');?>);">
 <div class="container">
            <div class="carousel-">
              <h1><?php the_sub_field('title');?></h1>
              <h3><?php the_sub_field('sub_title');?></h3>
              <a class="btn btn-large btn-primary" href="<?php the_sub_field('image_links_to');?>"><?php the_sub_field('links_to_text');?> <i class="icon-chevron-right"></i></a>
            </div>
          </div>
        </div>
	    <?php endwhile; ?>

      </div>
   </div><!-- /.carousel -->
      <a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a>
      <a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a>
	<?php endif; ?>

  • Below is what needs repeating

    <div class="item active" style="background-image: url(<?php the_sub_field('image');?>);">
 <div class="container">
            <div class="carousel-">
              <h1><?php the_sub_field('title');?></h1>
              <h3><?php the_sub_field('sub_title');?></h3>
              <a class="btn btn-large btn-primary" href="<?php the_sub_field('image_links_to');?>"><?php the_sub_field('links_to_text');?> <i class="icon-chevron-right"></i></a>
            </div>
          </div>
        </div>

  • Think I solved it. Works anyway

    	<?php if(get_field('slideshow_images')): ?>
    <div id="myCarousel" class="carousel slide carousel_banner">
<div class="carousel-inner">
      <?php $z = 0; while(the_repeater_field('slideshow_images')): ?>
      <?php $z = $z + 1; $image = wp_get_attachment_image_src(get_sub_field('image'), 'full'); ?>
  <div class="<?php echo ($z==1) ? 'active ' : ''; ?>item" style="background-image: url(<?php the_sub_field('image');?>);">
 <div class="container">
            <div class="carousel-">
              <h1><?php the_sub_field('title');?></h1>
              <h3><?php the_sub_field('sub_title');?></h3>
              <a class="btn btn-large btn-primary" href="<?php the_sub_field('image_links_to');?>"><?php the_sub_field('links_to_text');?> <i class="icon-chevron-right"></i></a>
            </div>
          </div> </div>
      <?php endwhile; ?>

      </div>
   </div><!-- /.carousel -->
      <a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a>
      <a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a>
	<?php endif; ?>
Viewing 3 posts - 1 through 3 (of 3 total)

The topic ‘Carousel using repeater field’ is closed to new replies.