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: http://stgeorgesnewhamburg.com/home.php.
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>
</ol>
<!-- 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>
</div>
</div>
</div>
<?php endforeach ?>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
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 ?>
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".
ie.
<?php $count=0 ?>
<?php foreach ($homepage_slideshowRecords as $record): ?>
<div class="item <?php if (!$count): ?>active<?php endif ?>">
<?php $count++ ?>
<?php endforeach ?>
Tim (toledoh.com.au)
Thanks for this, Tim. It worked perfectly. http://stgeorgesnewhamburg.com/home.php