carousel slider ??
6 posts by 2 authors in: Forums > CMS Builder
Last Post: August 25, 2015 (RSS)
I been working on this since early morning I cant figure out what I am missing - I made a special front-photo only one image goes in it
I have this working with lots of images on the detail page but I cant figure why it wont do just 1 image for each property rotation on the front page header here http://corraldetierrarealty.com/2index.php
<div class="row" id="header2">
<div class="col-md-12" >
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<?php foreach ($listingsRecords['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; ?>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<?php foreach ($listingsRecords['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; ?>
</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>
</div>
</div>
www.thenetgirl.com
By Damon - August 25, 2015
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!
Damon Edis - interactivetools.com
Hire me! Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/
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>
www.thenetgirl.com
By Damon - August 25, 2015
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.
Damon Edis - interactivetools.com
Hire me! Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/
AWESOME IT'S PERFECT .....THANKS SO MUCH. :-)
http://corraldetierrarealty.com/top3.php
www.thenetgirl.com
By Damon - August 25, 2015
:)
Happy to help!
Damon Edis - interactivetools.com
Hire me! Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/