Slider with Advanced custom fields

You still haven’t posted a live link and I’m all out of ideas. Bottom line is this is not a Roots issue and I was able to get the carousel working immediately in a clean install. It’s either something overlooked in the setup docs or a markup/scripting issue. Try running a search on stackoverflow.

yeah, I’ll post it as soon as I get it.

I’ve been doing research, but I’ll keep looking.

I really appreciate all the help.

GOT IT!
Logic error, I never increased the control variable to set the active slide! (i)

Than you so much for your help!

Here’s the html+php for everyone looking for reference

<?php if(have_rows('slides')): ?>
<div id="home-slider" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
  	
	<ol class="carousel-indicators">
	<?php 
		$i =0;
		while(have_rows('slides')): the_row();
	  	
  	?>	
	    <li data-target="#home-slider-indicator" data-slide-to="<?php echo $i;?>" class="<?php if ($i===0): echo('active'); endif; ?>"></li>
	 
	<?php 
	$i++;
	endwhile; ?>
	</ol><!--end indicators-->
<!-- Slides -->
	<div class="carousel-inner">
	<?php
		$i =0;
		while(have_rows('slides')): the_row();
  		//vars
  		$image = get_sub_field('image');
  		$firstText =  get_sub_field('first_text');
  		$secondText =  get_sub_field('second_text');
  		
  	?>	
	  
	    <div class="item <?php if ($i===0): echo('active'); endif; ?>">
	      <img src="<?php echo ($image); ?>" alt="<?php echo($firstText);?>">
	      <div class="carousel-caption">
	        <span class="first-text"><?php echo ($firstText); ?></span><br/>
	        <span class="second-text"><?php echo ($secondText); ?></span>
	      </div>
	    </div>
	    
	<?php
	$i++;
	 endwhile; ?>
	</div>	<!-- End of Slides -->
</div>
 <!-- Controls -->
 <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
 </a>
 <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
  </div>
<?php endif; ?>

Thanks

1 Like