Slideshow count problem

Hi commonSenseDesign,

I've neatened the example code to make it clearer what the layout should be:

<section id="slide">

  <div id="myCarousel" class="carousel slide">
    <div class="carousel-inner">

      <div class="active item">
        <div class="fillbg1">
          <div id="featuress" class="parallax">
          <div id="features" class="parallax-bg" style="background-position: 50% -33px; background:url('assets/images/slides/1.jpg');background-attachment: fixed;background-size: cover;"></div>
          <div class="overlay"></div>
          <div class="container clearfix">
            <div class="parallax-content">
              <div class="row-fluid margin">
                <div class="span12">
                  <h1>3 locations to serve you best</h1>
                  <h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h4>
                </div>
              </div>
            </div>
          </div>
          </div>
        </div>
      </div>

      <div class="item">
        <div class="fillbg2">
          <div id="featuress" class="parallax">
          <div id="features-2" class="parallax-bg" style="background-position: 50% -33px; background:url('assets/images/slides/3a.jpg');background-attachment: fixed;background-size: cover;"></div>
          <div class="overlay"></div>
          <div class="container clearfix">
            <div class="parallax-content">
              <div class="row-fluid margin">
                <div class="span12">
                  <h1>Compassion. Safety. Respect.</h1>
                  <h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h4>
                </div>
              </div>
            </div>
          </div>
          </div>
        </div>
      </div>

    </div>
    <a class="carousel-control left" href="#myCarousel" data-slide="prev"></a>
    <a class="carousel-control right" href="#myCarousel" data-slide="next"></a>
  </div>
</section>

It looks like each slide should be it's own item div, the code in the previous post was creating one item with all the slides in. I think you need to update your code to something like this:

<section id="slide">
  <div id="myCarousel" class="slide">
    <div class="carousel-inner">
      <?php foreach ($homepage_slideshowRecords as $record): ?>
        <?php foreach ($record['image'] as $index => $upload): ?>
          <div class="active item">
            <div class="fillbg<?php echo htmlencode($record['num']) ?>">
              <div id="featuress" class="parallax">
                <div id="features<?php echo htmlencode($record['num']) ?>" class="parallax-bg" style="background-position: 50% -33px; background:url('<?php echo htmlencode($upload['urlPath']) ?>');background-attachment: fixed;background-size: cover;">
                </div>
                <div class="overlay"></div>
                <div class="container clearfix">
                  <div class="parallax-content">
                    <div class="row-fluid margin">
                      <div class="span12">
                        <h1><?php echo htmlencode($record['title']) ?></h1>
                        <h4><?php echo $record['content']; ?></h4>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        <?php endforeach ?>
      <?php endforeach ?>
      <?php if (!$homepage_slideshowRecords): ?><?php endif ?>
    </div>
    <a class="carousel-control left" href="#myCarousel" data-slide="prev"></a>
    <a class="carousel-control right" href="#myCarousel" data-slide="next"></a>
  </div>
</section>

So for each record and image we create a separate div with the class item. This is example code, so you might have to make a few changes to get it working.

Let me know if you have any questions. 

Cheers,

Greg

Thanks for this, Greg.

This still seems to be displaying all of the input slides at once, rather than as a slideshow: http://creativebeginningschildcare.ca/home1.php.

I realized that with the hand-coded version, the first slide uses the div class "active item", whereas the subsequent ones use "item". On the CMSB version, all slides are classified as "active item".

Do you think might be the issue? If so, is there a way you of fixing this, please?

Hi, 

This link isn't working for me:

http://creativebeginningschildcare.ca/home1.php

I realized that with the hand-coded version, the first slide uses the div class "active item", whereas the subsequent ones use "item". On the CMSB version, all slides are classified as "active item".

You'll need to add an if statement that checks if we're looking at the first slide and its image adds the active class if we are. You can do this by checking if the key is equal to zero for both the slide and image index.

Cheers!

Greg

Sorry about the link; there seemed to be an errant period at the end.

http://www.creativebeginningschildcare.ca/home1.php

>>You'll need to add an if statement that checks if we're looking at the first slide and its image adds the active class if we are. You can do this by checking if the key is equal to zero for both the slide and image index.<<

Please can you point me in the direction of how-to instructions?

Hi commonSenseDesign, 

I think the issue seems to be related to all of the slides having a class of active. I tried removing that class from all of the slides but one, and it displayed correctly.  I think if you add an if statement so only the first slide has that class, the issue might be resolved.

Let me know if you have any questions!

Cheers,

Greg

Perfect! Thanks so much for your patience and advice.

http://www.creativebeginningschildcare.ca/home1.php