Jump to content

Adding active class to first div in carousel?


photoman355
 Share

Recommended Posts

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?  

Link to comment
Share on other sites

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;
	?>
  • Like 1
Link to comment
Share on other sites

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> 
Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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. 

  • Like 1
Link to comment
Share on other sites

  • 3 years later...

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 :( 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...