@derKaiser
You're very close now. There's just one thing you didn't understand. Everything inside the repeatable tag gets repeated for each repeatable item. That's why you see the first and second slide overlap. Really you have 4 slides. 2 visible, 2 hidden because you used the repeatable tag again for each slide.

Go ahead. Take a look. If you look at the page source in your browser you'll see how the generated page looks. You'll see:

Code: Select all

<div id="fragment-1" class="ui-tabs-panel" style="">

          <img src="path/to/image1.jpg" alt="slider-slika1" width="670px"; height="250px"; />
            <div class="info" >
              <h2><a href="#">Text for slide 1</a></h2>
              <p>Caption 1</p>
            </div> <!-- div info -->

          <img src="path/to/image2.jpg" alt="slider-slika1" width="670px"; height="250px"; />
            <div class="info" >
              <h2><a href="#">Text for slide 2</a></h2>
              <p>Caption 2</p>
            </div> <!-- div info -->

        </div> <!-- div fragment-1 -->

       <!-- SLIDER SECOND -->
        <div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">
          <img src="path/to/image1.jpg" alt="slider-slika1" width="670px"; height="250px"; />
            <div class="info" >
              <h2><a href="#">Text for slide 1</a></h2>
              <p>Caption 1</p>
            </div> <!-- div info -->

           <img src="path/to/image2.jpg" alt="slider-slika1" width="670px"; height="250px"; />
            <div class="info" >
              <h2><a href="#">Text for slide 2</a></h2>
              <p>Caption 2</p>
            </div> <!-- div info -->

       </div> <!-- div fragment-2 -->

Let's start by getting rid of the extra slides and moving the repeatable tag to surround the entire repeating code.

Code: Select all

<cms:show_repeatable "slider">
<div id="fragment-1" class="ui-tabs-panel" style="">
          <img src="<cms:show slider_image/>" alt="slider-slika1" width="670px"; height="250px"; />
            <div class="info" >
              <h2><a href="#"><cms:show slider_text /></a></h2>
              <p><cms:show slider_caption /></p>
            </div> <!-- div info -->
        </div> <!-- div fragment-1 -->
</cms:show_repeatable>

Good. But your slider code is not as simple as my example. Each slide has a different id and class. Luckily, Couch can handle this using the <cms:if> tag and the repeatable tag's counter.

Code: Select all

<cms:show_repeatable "slider">
<div id="fragment-<cms:show k_count />" class="ui-tabs-panel<cms:if k_count gt '1'> ui-tabs-hide</cms:if>" style="">
          <img src="<cms:show slider_image/>" alt="slider-slika1" width="670px"; height="250px"; />
            <div class="info" >
              <h2><a href="#"><cms:show slider_text /></a></h2>
              <p><cms:show slider_caption /></p>
            </div> <!-- div info -->
        </div> <!-- div fragment-<cms:show k_count /> -->
</cms:show_repeatable>

Try it and see if that works.

I've gotta run, but the thumbnail is easy. Take a look at the thumbnail tag. It doesn't show in the admin panel. You just use it on the front end. http://www.couchcms.com/docs/tags-refer ... ail-1.html

Tnx @tim, it works!

I have just one problem -

Code: Select all

<cms:show_repeatable "slider">
          <img src="<cms:show slider_image/>" alt="slider-slika1" width="670px"; height="250px"; />
            <div class="info" >
              <h2><a href="#"><cms:show slider_text /></a></h2>
              <p><cms:show slider_caption /></p>
            </div> <!-- div info -->
          </cms:show_repeatable>

I have problem with 4th line (<a href="#">). What should I put instead "#" so that slider_text will have link to some article?

The # is a placeholder. You would put the link to the article in there. So you need another item in your repeatable region for the link.

Code: Select all

     <cms:editable name='slider_link'
      label="Link"
      type="text" />

Then the front end code would be

Code: Select all

<h2><a href="<cms:show slider_link/>"><cms:show slider_text /></a></h2>

Of course, if it's an article on your own site, there could be a way to automatically link to it using Couch tags and variables. But that would be a whole different thing.

Thanks for explaining this topic. I used this and it works fine on sliders. As soon as there anre more fields in the repeatable regions i will try cloneable pages for a slider. I hope I get this working its little more work but should make my listed siders in the CMS better accessable.

I'm glad this was helpful, @chichi.

It's really no more difficult doing this with a clonable template. You just use a clonable template instead of a repeatable region for the backend and the cms:pages tag instead of cms:repeatable for the front end.

Let's convert this example to one using a clonable template.

For the back end we'll create a page called slider.php:

Code: Select all

<?php require_once( 'couch/cms.php' ); ?>

<cms:template title='slider' clonable='1' executable='0' >
   <cms:editable name='slider_image'
      label="Slideshow Image"
      width="640"
      height="430"
      show_preview='1'
      preview_width="150"
      type="image" />
     <cms:editable name='slider_text'
      label="Text"
      type="text" />
   <cms:editable name='slider_caption'
      label="Caption"
      type="text" />
     <cms:editable name='slider_link'
      label="Link"
      type="text" />
</cms:template>

<?php COUCH::invoke(); ?>

On the front end, replace the show_repeatable tag with the pages tag.

Code: Select all

<cms:pages masterpage='slider.php' >
<div id="fragment-<cms:show k_count />" class="ui-tabs-panel<cms:if k_count gt '1'> ui-tabs-hide</cms:if>" style="">
          <img src="<cms:show slider_image/>" alt="slider-slika1" width="670px"; height="250px"; />
            <div class="info" >
              <h2><a href="<cms:show slider_link/>"><cms:show slider_text /></a></h2>
              <p><cms:show slider_caption /></p>
            </div> <!-- div info -->
        </div> <!-- div fragment-<cms:show k_count /> -->
</cms:pages>

That's all there is to it. I haven't tested this, so if I've made any mistakes or typos, I'm sorry. Of course, it still requires the javascript to animate it.