carousel slider ??

Hi Patricia,

It looks like you have the viewer code at the top of the page for a detail page and to show images from different listing records you will need to change it to viewer code for a list page.

Attached is the code I updated includes this and the extra foreach code needed further down the page.

Try it out and hopefully that does it. But if not, can you send in a support request with site details and link to the page:
https://www.interactivetools.com/support/email_support_form.php

Thanks!

YEah it just stacks the images on top of each other instead of sliding

http://corraldetierrarealty.com/top3.php

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<?php foreach ($listingsRecords as $record): ?>
<?php foreach ($record['front_photo'] as $index => $upload): ?>
<li data-target="#carousel-example-generic" data-slide-to="<?php echo $index; ?>"<?php echo $index == 0 ? ' class="active"' : ''; ?>"></li>
<?php endforeach; ?>
<?php endforeach; ?>
</ol>

<!-- Wrapper for slides -->
<div class="carousel-inner">
<?php foreach ($listingsRecords as $record): ?>
<?php foreach ($record['front_photo'] as $index => $upload): ?>
<div class="item<?php echo $index == 0 ? ' active' : ''; ?>">
<img src="<?php echo htmlencode($upload['urlPath']) ?>" width="<?php echo $upload['width'] ?>" height="<?php echo $upload['height'] ?>" alt="" /></a>
</div>
<?php endforeach; ?>
<?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>

Hi again,

I updated the code and attached it.

Added a counter so that the images have unique number. Example:

<li data-target="#carousel-example-generic" data-slide-to="0" ></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>

Also added counter to make the first image active:

<div class="item active">

And the following images not active until needed:

<div class="item">

Try this out and let me know if this works now.

:)

Happy to help!