Jump to content
photoman355

Adding active class to first div in carousel?

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?  

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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

Share this post


Link to post
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> 

Share this post


Link to post
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. 

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By cosmicsafari
      Hi all,
      I have need to dynamically set InputFieldMultiSelect to  selected on page load based on the status of some items within a database table.
      However I keep running into issues when trying to do this via InputfieldSelect::setOptionAttributes()
      https://processwire.com/api/ref/inputfield-select/set-option-attributes/
      Going by the above it sounds like it should be pretty straight forward, and for certain values it seems to work but not when I wanted to set it to 'selected'.
      For example:
      $f->setOptionAttributes(1030,['foo' => 'test']); The above works as I would have wanted, in that it updates the option with the value 1030, to include the attribute foo="test"
      But the same code above edited to the following:
      $f->setOptionAttributes(1030,['selected' => 'selected']); Doesn't seem to do anything?
      I assume I'm missing something or trying to implement the 'selected' wrongly but I'm not sure how else I should approach this, any advice would be much appreciated.
       
    • By Orkun
      Hi Guys
      Since I nearly always needed a Slider for my websites, I've searched for a Slider which I could use for every Project or better said for different scenarios. So It had to be a rich-feature, responsive and customizable Slider which could be adapted/changed hassle-free to different needs of customers. In the end I found this nice jQuery Slider Plugin called "Slider Pro" (don't worry, it is MIT licensed ) which I think fulfills all expectations above and it also works very well for me. Perhaps it is also useful for you.
      Github Link: https://github.com/bqworks/slider-pro/
      PS: What kind of Sliders are you using for your projects? Do you build your Sliders from scratch?
      Greetings Nukro
    • By mike62
      I've implemented Slick sliders on WordPress sites many times, but I've never had this error before.
      The site is here.
      The template code I'm using is:
      <link rel="stylesheet" type="text/css" href="/site/templates/scripts/slick/slick.css"/> <script type="text/javascript" src="/site/templates/scripts/slick/slick.js"></script> <?php // if (count($page->home_header_image) > 0): ?> <div class="home-featured-image slick-carousel"> <?php foreach($page->home_header_image as $image): ?> <div class="slide"><img src="<?php echo $image->size(1280,420)->url; ?>"></div> <?php endforeach ?> </div> <?php // endif ?> <script> (function($) { $('.slick-carousel').slick(); })( jQuery ); </script> The JS error I'm getting is:
      TypeError: $.proxy is not a function. (In '$.proxy(_.autoPlay, _)', '$.proxy' is undefined)
      As you can see, I tried wrapping the JS call in noconflict, but that doesn't help. 
      What am I missing?
       
    • By hacsor
      Hi
      I have a existing project in Foundation 6 with some jQuery plugins,  and I'm try to move to Processwire, but  it shows a Revolution Slider Plugin error when I open index page .
      How can I solve this?
      Thanks!

    • By Raymond Geerts
      I was wondering how to achieve the following.
      A total of 100 pages which are listed with a limit of 10 items per page, resulting in 10 pages of 10 items.
      Instead i desire the following (below), and wondering how to setup the code / selector(s).
      The first page should show a list of 8 items. After that all following pages should have a limit of 10 items.
      page 1 -> items 1 - 8 -> (limit 8) page 2 -> items 9 - 18 -> (limit 10) page 3 -> items 19 - 28 -> (limit 10) ... page 9 -> items 79 - 88 -> (limit 10) page 10 -> items 89 - 98 -> (limit 10) page 11 -> items 98 - 100 -> (limit 10) The ideal situation would be to have an extra page selector property aside of 'limit', something named 'limit_first' or alike.
×
×
  • Create New...