Adding active class to first div in carousel?

[photoman355]

I've been trying to make a carousel with a repeater field that has an "active" class on the first div.  I found a similar thread here but still can't get it to work.  Most likely me having a dumb moment

Here's my code:

<div class="carousel slide <?=$page->position?>">
<h4><?=$page->heading?></h4>
<!-- Carousel items -->
    <div class="carousel-inner">
	<?php 
	$output = '';
	$class = 'item';
	
	foreach($page->testimonials as $testimonial) {
		$status = '';
		
		if ($testimonial === $page->testimonials->first()) $status .= ' active';
		$class .= $status;
		
		$output .=
		  "<div class='{$class}'> 
			  <img class='quotes' src='{$config->urls->templates}assets/img/quotes.png'>
			  <p>{$testimonial->body}</p>
			  <h6>{$testimonial->person_name}</h6>
          </div>";
    }
	echo $output;
	?>
    </div>
</div>

  Any ideas where I'm going wrong?  

[apeisa]

Please tell us what kind of problems you are having? Error? Or not class on first item?

[Wanze]

Hi photoman,

You do some complicated things not necessary

Try this code. I'm adding an active class if $k is zero, which means we are in the first iteration in our loop:

	<?php 
	$output = '';
	$class = 'item';
	
	foreach($page->testimonials as $k => $testimonial) {		
		$active = ($k == 0) ? " active" : "";		
		$output .=
		  "<div class='{$class}{$active}'> 
			  <img class='quotes' src='{$config->urls->templates}assets/img/quotes.png'>
			  <p>{$testimonial->body}</p>
			  <h6>{$testimonial->person_name}</h6>
          </div>";
    }
	echo $output;
	?>

[photoman355]

Wanze this didn't work first time round, I was getting errors with "$output .=".  I changed the code over as below and now it's working perfectly!  Thanks very much for all your help.

One small problem I'm still getting is there is a small delay bringing in "$testimonial->person_name" when the slide loads.  I'm not sure if this is because php loads the items in the order they were echoed but I'm surprised the delay is visible.  It makes the load look jerky.  Any advice on this?

<div class="carousel slide <?=$page->position?>">
<h4><?=$page->heading?></h4>
<!-- Carousel items -->
    <div class="carousel-inner">
	<?php 
		$class = 'item';
		
	    foreach($page->testimonials as $k => $testimonial) {		
		$active = ($k == 0) ? " active" : "";	

		echo  "<div class='{$class}{$active}'>
					<img class='quotes' src='{$config->urls->templates}assets/img/quotes.png'>
					<p>{$testimonial->body}</p>
					<h6>{$testimonial->person_name}</h6>
				</div>";
    }?>
    </div>
</div> 

[ryan]

One small problem I'm still getting is there is a small delay bringing in "$testimonial->person_name" when the slide loads.  I'm not sure if this is because php loads the items in the order they were echoed but I'm surprised the delay is visible.  It makes the load look jerky.  Any advice on this?

I don't think the delay would be coming from ProcessWire. Most likely client side, styles or javascript. Try removing these and working forwards from there till isolating what it is. Sometimes browsers get in an odd state too, so the first thing to try might just be quitting and reopening your browser. But if that's not it, definitely remove CSS and JS from the equation, and then start adding them back till you isolate it. 

[alan]

It makes the load look jerky.  Any advice on this?

IF you have debug turned on, try turning it off just to check if it was slowing page load down.

[ryan]

Debug mode shouldn't make any difference in that respect. Since browsers render output as a big chunk, you don't ever get to see HTML elements rendered individually one-by-one (except for images and ajax). At least not in a situation like this. As a result, if there is a perceptible delay between rendering of adjacent HTML elements, that has something to do with CSS or JS (more likely JS). Whereas if there is a perceptible delay before you see anything rendered in your browser, that can be at the server side or the client side. 

[photoman355]

You're right it had nothing to do with the php, it turned out to be a JS problem.  Thanks for your help Ryan.  

[Reezal AQ]

Hello,

 

How do you fix this ? 

 <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
    <? foreach($page->SlideImagesRepeater as $SlideImagesRepeat): ?>
        <div class="item active">

            <img src="<?=$SlideImagesRepeat->SlideshowImage->first()->url?>" alt="Hero Slide">

            <div class="carousel-caption">
                <h1><?=$SlideImagesRepeat->SlideTitle ?></h1>

                <p><?=$SlideImagesRepeat->SlideParagraph ?></p>
            </div>

        </div>
         <? endforeach; ?>
        
    </div>

It's very different from above so I'm kinda lost