Forum
repeater and carousel on detail page
In the middle of my product detail template I have the code for a standard bootstrap carousel, using a repeater so that the customer can add a number of images, which is great.
The problem is that above the repeater section is an un-ordered list for the carousel indicators(the spots you can click on to skip to an image). The amount of list items(spots) should be dependent on the number of images that have been added in the repeater section e.g. 4 images 4 spots
The template pages are html, so even if I could get the item_count from the repeater section I can't see how I can do this dynamically with PHP.
Is there a way around this or do I have to rely on Javascript to inject the dom elements into the page instead?
Part of the code is below. Thanks.
<div class='itemBox'>
<perch:categories id="categories" label="Machine Types" set="Machines" required="true"/>
<h4 class='itemTitle'><perch:content id="model" type="text" label="Machine Model" required="true" title="true" /></h4>
<div id="machinesCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ul class="carousel-indicators">
<li data-target="#machinesCarousel" data-slide-to="0" class="active"></li>
<li data-target="#machinesCarousel" data-slide-to="1"></li>
<li data-target="#machinesCarousel" data-slide-to="2"></li>
<li data-target="#machinesCarousel" data-slide-to="3"></li>
<li data-target="#machinesCarousel" data-slide-to="4"></li>
</ul>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<perch:repeater id="slideimages" label="Slide Images" max="5">
<perch:if exists="perch_item_first">
<div class="item active">
<perch:else />
<div class="item">
</perch:if>
<perch:content id="image" type="image" label="Image" output="tag" />
</div>
</perch:repeater>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#machinesCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#machinesCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<h3 class='separator'>Details</h3>
<div class='item'>
<perch:content id="desc" type="textarea" label="Description" textile="true" editor="markitup" />
<h4 class='price'>Price: <perch:content id="price" type="text" label="Price" /></h4>
</div>
</div>
</div>
Hi Russell,
Here's how I do it:
On the page:
Template for _carousel_indicators.html:
carousel.html template:
Thanks a lot for that Simon. A bit frazzled at the moment, but I will have a look through your solution.
I did manage to solve it with a bit of javascript, but would prefer to use perch/php if possible.
I know the feeling :)
I'm pretty sure I made a version using repeaters that only needed one template and one call to perch_content on the page. I'll see if I can dig it out.