Setting a slider using CMSB

Hi Jesus,

Try this code with the changes in bold.

        <div id="carousel-area">
          <div id="carousel-slider" class="carousel slide" data-interval="3000">
            <!-- Indicators -->
            <ol class="carousel-indicators">
             <?php $counter = 0; ?>
              <?php foreach ($slider_rootRecords as $record): ?>
               <?php if($counter == 0): ?>
                 <?php $class = 'class="active"'; ?>
               <?php endif; ?>
                  <li data-target="#carousel-slider" data-slide-to="<?php echo $counter; ?>" <?php echo @$class; ?> ></li>
                  <?php $counter++ // increment counter ?>
              <?php endforeach ?>
            </ol>
            <div class="carousel-inner">
              <!-- Carousel Items Strarts-->
              <?php foreach ($slider_rootRecords as $record): ?>
              <div class="item active" style="background-image: url(<?php echo htmlencode($upload['urlPath']) ?>);">
                <div class="carousel-caption">
                  <h2>
                    <?php echo htmlencode($record['title']) ?> 
                  </h2>
                  <h3>
                    <?php echo htmlencode($record['subtitulo']) ?>
                  </h3>
                  <a class="btn btn-lg btn-common" href="<?php echo $record['_link'] ?>">
                    <i class="fa fa-check">
                    </i>
                    <?php echo htmlencode($record['texto_boton']) ?>
                  </a>
                </div>
              </div>
              <?php endforeach ?>
            </div><!-- Carousel Item Ends -->
            <a class="left carousel-control" href="#carousel-slider" role="button" data-slide="prev">
              <i class="fa fa-chevron-left">
              </i>
            </a>
            <a class="right carousel-control" href="#carousel-slider" role="button" data-slide="next">
              <i class="fa fa-chevron-right">
              </i>
            </a>
          </div>
        </div>

Thanks Damon,

I'm getting closer but still not getting the images to slide, I'm getting all of them listed below.

Testing url: http://mundoregio.com/new-index.php

Thanks for checking and of course for all your help!

Oh, I see the issue.

Viewing the source of the page here:
http://mundoregio.com/new-index.php

starting on 454, all the image divs have class="item active" making them visible.

Try this code. See changes in bold.

       <div id="carousel-area">
          <div id="carousel-slider" class="carousel slide" data-interval="3000">
            <!-- Indicators -->
            <ol class="carousel-indicators">
             <?php $counter = 0; ?>
              <?php foreach ($slider_rootRecords as $record): ?>
               <?php if($counter == 0): ?>
                 <?php $class = 'class="active"'; ?>
               <?php endif; ?>
                  <li data-target="#carousel-slider" data-slide-to="<?php echo $counter; ?>" <?php echo @$class; ?> ></li>
                  <?php $counter++ // increment counter ?>
              <?php endforeach ?>
            </ol>
            <div class="carousel-inner">
              <!-- Carousel Items Strarts-->
              <?php $counter = 0; ?>
              <?php foreach ($slider_rootRecords as $record): ?>
              <?php if($counter == 0): ?>
               <?php $active = "active"; ?>
              <?php endif; ?>
              <div class="item <?php echo @$active; ?>" style="background-image: url(<?php echo htmlencode($upload['urlPath']) ?>);">
                <div class="carousel-caption">
                  <h2>
                    <?php echo htmlencode($record['title']) ?> 
                  </h2>
                  <h3>
                    <?php echo htmlencode($record['subtitulo']) ?>
                  </h3>
                  <a class="btn btn-lg btn-common" href="<?php echo $record['_link'] ?>">
                    <i class="fa fa-check">
                    </i>
                    <?php echo htmlencode($record['texto_boton']) ?>
                  </a>
                </div>
              </div>
              <?php $counter++ // increment counter ?>
              <?php endforeach ?>
            </div><!-- Carousel Item Ends -->
            <a class="left carousel-control" href="#carousel-slider" role="button" data-slide="prev">
              <i class="fa fa-chevron-left">
              </i>
            </a>
            <a class="right carousel-control" href="#carousel-slider" role="button" data-slide="next">
              <i class="fa fa-chevron-right">
              </i>
            </a>
          </div>
        </div>

When I'm setting up slideshows, image popups or galleries, I make a hardcoded working example on the same site so that I can compare the code that works and then match to that with the CMS Builder published code and counters if needed.

Hope this helps!

Hi Damon,

I'm still getting all active tag on all images, so all of them are being showed

Hi again,

Just checked the code again and I missed add this code before the end of the foreach loop:

<?php $counter++ // increment counter ?>

I updated the code in the above post.

Same result, here's the code I'm using I updated the image because I was missing the foreach for the upload image. On bold below. Thanks again!

       <div id="carousel-area">
          <div id="carousel-slider" class="carousel slide" data-interval="3000">
            <!-- Indicators -->
            <ol class="carousel-indicators">
             <?php $counter = 0; ?>
              <?php foreach ($slider_rootRecords as $record): ?>
               <?php if($counter == 0): ?>
                 <?php $class = 'class="active"'; ?>
               <?php endif; ?>
                  <li data-target="#carousel-slider" data-slide-to="<?php echo $counter; ?>" <?php echo @$class; ?> ></li>
                  <?php $counter++ // increment counter ?>
              <?php endforeach ?>
            </ol>
            <div class="carousel-inner">
              <!-- Carousel Items Strarts-->
              <?php $counter = 0; ?>
              <?php foreach ($slider_rootRecords as $record): ?>
              <?php if($counter == 0): ?>
               <?php $active = "active"; ?>
              <?php endif; ?>
              <?php foreach ($record['imagen'] as $index => $upload): ?>
              <div class="item <?php echo @$active; ?>" style="background-image: url(<?php echo htmlencode($upload['urlPath']) ?>);">
              <?php endforeach ?>
                <div class="carousel-caption">
                  <h2>
                    <?php echo htmlencode($record['title']) ?> 
                  </h2>
                  <h3>
                    <?php echo htmlencode($record['subtitulo']) ?>
                  </h3>
                  <a class="btn btn-lg btn-common" href="<?php echo $record['_link'] ?>">
                    <i class="fa fa-check">
                    </i>
                    <?php echo htmlencode($record['texto_boton']) ?>
                  </a>
                </div>
              </div>
              <?php $counter++ // increment counter ?>
              <?php endforeach ?>
            </div><!-- Carousel Item Ends -->
            <a class="left carousel-control" href="#carousel-slider" role="button" data-slide="prev">
              <i class="fa fa-chevron-left">
              </i>
            </a>
            <a class="right carousel-control" href="#carousel-slider" role="button" data-slide="next">
              <i class="fa fa-chevron-right">
              </i>
            </a>
          </div>
        </div>

Hi Damon, I figured out!!

I made a few adjustments with if/else statements in order to have the active tag working properly.

       <div id="carousel-area">
          <div id="carousel-slider" class="carousel slide" data-interval="3000">
            <!-- Indicators -->
            <ol class="carousel-indicators">
             <?php $counter = 0; ?>
              <?php foreach ($slider_rootRecords as $record): ?>
               <?php if($counter == 0): ?>
                 <?php $class = 'class="active"'; ?>
                  <li data-target="#carousel-slider" data-slide-to="<?php echo $counter; ?>" <?php echo @$class; ?> ></li>
               <?php else: ?>
                  <li data-target="#carousel-slider" data-slide-to="<?php echo $counter; ?>" ></li>
               <?php endif; ?>
                  <?php $counter++ // increment counter ?>
              <?php endforeach ?>
            </ol>
            <div class="carousel-inner">
              <!-- Carousel Items Strarts-->
              <?php $counter = 0; ?>
              <?php foreach ($slider_rootRecords as $record): ?>
               <?php foreach ($record['imagen'] as $index => $upload): ?>
             <?php if($counter == 0): ?>
               <?php $active = "active"; ?>
              <div class="item <?php echo @$active; ?>" style="background-image: url(<?php echo htmlencode($upload['urlPath']) ?>);">
              <?php else: ?>
              <div class="item" style="background-image: url(<?php echo htmlencode($upload['urlPath']) ?>);">
              <?php endif; ?>
              <?php endforeach ?>
                <div class="carousel-caption">
                  <h2>
                    <?php echo htmlencode($record['title']) ?> 
                  </h2>
                  <h3>
                    <?php echo htmlencode($record['subtitulo']) ?>
                  </h3>
                  <a class="btn btn-lg btn-common" href="<?php echo $record['_link'] ?>">
                    <i class="fa fa-check">
                    </i>
                    <?php echo htmlencode($record['texto_boton']) ?>
                  </a>
                </div>
              </div>
              <?php $counter++ // increment counter ?>
              <?php endforeach ?>
            </div><!-- Carousel Item Ends -->
            <a class="left carousel-control" href="#carousel-slider" role="button" data-slide="prev">
              <i class="fa fa-chevron-left">
              </i>
            </a>
            <a class="right carousel-control" href="#carousel-slider" role="button" data-slide="next">
              <i class="fa fa-chevron-right">
              </i>
            </a>
          </div>
        </div>

Hi Damon, I figured out!!

I made a few adjustments with if/else statements in order to have the active tag working properly.

Thanks for the update! Glad to hear that it is now working.