Support

Account

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)

You must be logged in to reply to this topic.

We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.