Setting up a carousel slideshow

3 posts by 2 authors in: Forums > CMS Builder
Last Post: April 20, 2021   (RSS)

By CommonSenseDesign - April 19, 2021 - edited: April 19, 2021

Hi, All.

I'm integrating CMSB into a template, and the homepage has a slideshow. I've uploaded two slide images, but I'm struggling to get just one image appear at a time. Both appear on the page, one above the other. (I think "active" - highlighted below in red - is probably causing this problem.)

I also can't figure out how to get the next/previous arrows to function, either. This is the demo page:

Here's the code I'm using:

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>

<!-- Wrapper for slides -->
<div class="carousel-inner">

<?php foreach ($homepage_slideshowRecords as $record): ?>
<div class="item active">
<?php foreach ($record['image'] as $index => $upload): ?>
<img src="<?php echo htmlencode($upload['urlPath']) ?>" alt="<?php echo htmlencode($record['title']) ?>">
<?php endforeach ?>
<div class="carousel-caption">

<div class="jumbotron__container">
<h2 class="jumbotron__subtitle"><?php echo htmlencode($record['content']) ?></h2>
<h1 class="jumbotron__title"><?php echo htmlencode($record['title']) ?></h1>
<a class="btn btn-warning" href="<?php echo htmlencode($record['link_address']) ?>">Read more</a>

<?php endforeach ?>


<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>

Can anyone suggest how I fix this, please?

This is the basic code generated by CMSB.

<?php foreach ($homepage_slideshowRecords as $record): ?>
<?php echo htmlencode($record['num']) ?>
<?php echo htmlencode($record['content']) ?>
<?php echo htmlencode($record['title']) ?>
<?php echo htmlencode($record['link_address']) ?>

<?php foreach ($record['image'] as $index => $upload): ?>
<img src="<?php echo htmlencode($upload['urlPath']) ?>" alt="">
<?php endforeach ?>

<?php endforeach ?>


home.php 9K

By Toledoh - April 19, 2021

I normally just use a "counter", so for every loop a variable gets higher.  If the variable is zero, then show the "active".


<?php $count=0 ?>

<?php foreach ($homepage_slideshowRecords as $record): ?>
<div class="item <?php if (!$count): ?>active<?php endif ?>">

<?php $count++ ?>

<?php endforeach ?>

Tim (