Setting a slider using CMSB

9 posts by 2 authors in: Forums > CMS Builder
Last Post: May 27, 2016   (RSS)

By Jesus - May 26, 2016

Hi,

I've doing this kind of stuff on other occasions, but on this case I'm kind of lost here, so if someone could point me to the right direction will be really appreciate it! :)

The original slider code looks like this:

        <div id="carousel-area">
          <div id="carousel-slider" class="carousel slide" data-interval="3000">
            <!-- Indicators -->
            <ol class="carousel-indicators">
              <li data-target="#carousel-slider" data-slide-to="0" class="active">
              </li>
              <li data-target="#carousel-slider" data-slide-to="1">
              </li>
              <li data-target="#carousel-slider" data-slide-to="2">
              </li>
            </ol>
            <div class="carousel-inner">
              <!-- Carousel Items Starts-->
              <div class="item active" style="background-image: url(//img/slider/img-1.jpg);">
                <div class="carousel-caption">
                  <h2>
                    Slider Title
                  </h2>
                  <h3>
                    Slider text
                  </h3>
                  <a class="btn btn-lg btn-common" href="#">
                    <i class="fa fa-check">
                    </i>
                    Get Started
                  </a>
                </div>
              </div>
              <div class="item" style="background-image: url(//img/slider/img-3.jpg);">
                <div class="carousel-caption">
                  <h2>
                    Slider Title
                  </h2>
                  <h3>
                    Slider text
                  </h3>
                  <a class="btn btn-common btn-lg " href="#">
                    <i class="fa fa-coffee">
                    </i>
                    Learn More
                  </a>
                </div>
              </div>
              <div class="item" style="background-image: url(//img/slider/img-3.jpg);">
                <div class="carousel-caption">
                  <h2>
                    Slider Title
                  </h2>
                  <h3>
                    Slider text
                  </h3>
                  <a class="btn btn-lg btn-common" href="#">
                    <i class="fa fa-coffee">
                    </i>
                    Learn More
                  </a>
                </div>
              </div>
            </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>

So I created my Multi-Record Section with the values I need in order to fill this properly.

But a few things I noticed are causing me headaches...

1st here:

            <ol class="carousel-indicators">
              <li data-target="#carousel-slider" data-slide-to="0" class="active">
              </li>
              <li data-target="#carousel-slider" data-slide-to="1">
              </li>
              <li data-target="#C-slider" data-slide-to="2">
              </li>
            </ol>

I've an active class on the 1st <li> element, that seems to be important in order to get the slider working.

Also, I'm wondering how to create the foreach element on both sections, as I'm seeing the Indicators area and the Carousel Items Starts area.

Here's what I'm trying with no luck... I'm displaying the images, but the slider its not working.

        <div id="carousel-area">
          <div id="carousel-slider" class="carousel slide" data-interval="3000">
            <!-- Indicators -->
            <ol class="carousel-indicators">
              <?php foreach ($slider_rootRecords as $record): ?>
                  <li data-target="#carousel-slider" data-slide-to="<?php echo htmlencode($record['num']) ?>"></li>
              <?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>

I don't know how to put the active class on the 1st <li> tag and I'm missing something as the slider its not working.

Thanks for any help in ordet to make it work.

Jesus

By Damon - May 26, 2016

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>

Cheers,
Damon Edis - interactivetools.com

Hire me! Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/

By Jesus - May 26, 2016 - edited: May 26, 2016

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!

By Damon - May 26, 2016 - edited: May 26, 2016

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!

Cheers,
Damon Edis - interactivetools.com

Hire me! Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/

By Jesus - May 26, 2016

Hi Damon,

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

By Damon - May 26, 2016

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.

Cheers,
Damon Edis - interactivetools.com

Hire me! Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/

By Jesus - May 26, 2016

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>

By Jesus - May 27, 2016

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>