Thread

Hi All,

I’m developing a site in ExpressionEngine using this slider: http://2.s3.envato.com/files/1304419/index.html

I’m using Matrix for each entry. My question is, the code for this file has it setup like this:

<div id="start">
  images/slider/road.jpg
  images/slider/bed.jpg
  images/slider/chair.jpg
  images/slider/color_mix.jpg
  images/slider/hand.jpg
  images/slider/cactus.jpg
  images/slider/willow.jpg
 </div>
 
 <div class="b-slider-captions" id="forest_slide_one">
  <h3>It looks like an ordinary image slider at first sight…
 
  Why not try switching an image?</h3><p> <br />
 </div>

Does anyone have any idea on how to setup the loop that it would update the rel=“forest_slide_” with the number it needs to be?

Hope that makes sense. Any help is greatly appreciated!

Thanks!

Do you mean a single matrix field contains all of the images and captions in the slider, or is a matrix field containing one slider image and its associated caption?

I suspect it’s the first option, base on what you’re looking for.  If you want your images grouped at the top and your captions groups beneath, the simple thing is to use two loops of the same matrix field (just make sure if you add parameters to the matrix loop that they match one another):

{matrix_field}
{if row_count == "1"}<div id="start">{/if}
  {matrix_image_field}
{if row_count == total_rows}</div>{/if}
{/matrix_field}

{matrix_field}
<div class="b-slider-captions" id="forest_slide_{row_count}">
  <h3>{matrix_caption_field}</h3><p> <br />
 </div><br />
{/matrix_field}

Hope that helps.

Perfect, thanks so much!