Setting a slide's status to active/not active

5 posts by 3 authors in: Forums > CMS Builder
Last Post: June 30, 2021   (RSS)

By CommonSenseDesign - May 14, 2021

Hi, all.

Can someone please tell me how to set the status of the first image in a slideshow to "active", but all subsequent statuses set to not active?

<?php foreach ($homepageRecord['slideshow'] as $index => $upload): ?>
<div class="item active">
<div class="fill" style="background-image:url('<?php echo htmlencode($upload['urlPath']) ?>');">
<div class="banner-content">
<div class="container">
<div class="row">
<div class="banner-text al-left pos-left dark">
<div class="animated fadeInUp">&nbsp;</div>
</div>
</div>
</div>
</div>
</div>
</div>
<?php endforeach ?>

This is what the hard-coded version looks like https://www.castlerockcontracting.ca/home2.php

<div class="carousel-inner stky-banner">
<div class="item active">
<div class="fill" style="background-image:url('image/slider-oil-a.jpg');">
<div class="banner-content">
<div class="container">
<div class="row">
<div class="banner-text al-left pos-left dark">
<div class="animated fadeInUp">&nbsp;</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="fill" style="background-image:url('image/slider-oil-b.jpg');">
<div class="banner-content">
<div class="container">
<div class="row">
<div class="banner-text al-left pos-left light">
<div class="animated fadeInUp">&nbsp;</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Grateful for any suggestions.

By Dave - May 25, 2021

Hi CommonSenseDesign, 

Try this: 

<?php $counter = 0; ?>
<?php foreach ($homepageRecord['slideshow'] as $index => $upload): ?>
<?php
  $counter = $counter + 1;
  if ($counter = 1) { $class = "item active"; }
  else              { $class = "item"; }
?>
<div class="<?php echo $class; ?>">
  <div class="fill" style="background-image:url('<?php echo htmlencode($upload['urlPath']) ?>');">
    <div class="banner-content">
      <div class="container">
        <div class="row">
          <div class="banner-text al-left pos-left dark">
            <div class="animated fadeInUp">&nbsp;</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<?php endforeach ?>

Hope that helps!

Dave Edis - Senior Developer
interactivetools.com

By Djulia - June 30, 2021 - edited: June 30, 2021

Hi CommonSenseDesign,

Change

<?php
  $counter = $counter + 1;
  if ($counter = 1) { $class = "item active"; }
  else              { $class = "item"; }
?>

with

<?php
  $counter = $counter + 1;
  if ($counter == 1) { $class = "item active"; }
  else               { $class = "item"; }
?>

Djulia