Hello,

I have slideshow on index page and I need to make it dynamic with CouchCMS. Can anyone help me with it please? The slideshow works statically but I have to make it dynamic.

This is full code -

<section id="main-slider" class="no-margin">
<div class="carousel slide wet-asphalt">
<ol class="carousel-indicators">
<li data-target="#main-slider" data-slide-to="0" class="active"></li>
<li data-target="#main-slider" data-slide-to="1"></li>
<li data-target="#main-slider" data-slide-to="2"></li>
</ol>
<cms:editable name='main_content' type='richtext'>
<div class="carousel-inner">
<div class="item active" style="background-image: url(images/slider/bg1.jpg)">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="carousel-content centered">
<h2 class="animation animated-item-1">Current Exhibition</h2>
<h2 class="animation animated-item-1">On show</h2>
<h2 class="animation animated-item-1">Studio Eleven</h2>
<br>
<!--BUTTON LEARN MORE!!!--><a class="btn btn-md animation animated-item-3" href="#">Learn More</a>
</div>
</div>
</div>
</div>
</div><!--/.item-->
<div class="item" style="background-image: url(images/slider/bg2.jpg)">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="carousel-content center centered">
<h2 class="boxed animation animated-item-1">Clean, Crisp, Powerful and Responsive Web Design</h2>
<p class="boxed animation animated-item-2">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<br>
<a class="btn btn-md animation animated-item-3" href="#">Learn More</a>
</div>
</div>
</div>
</div>
</div><!--/.item-->
<div class="item" style="background-image: url(images/slider/bg3.jpg)">
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="carousel-content centered">
<h2 class="animation animated-item-1">Powerful and Responsive Web Design Theme</h2>
<p class="animation animated-item-2">Pellentesque habitant morbi tristique senectus et netus et malesuada fames</p>
<a class="btn btn-md animation animated-item-3" href="#">Learn More</a>
</div>
</div>
<div class="col-sm-6 hidden-xs animation animated-item-4">
<div class="centered">
<div class="embed-container">
<iframe src="//player.vimeo.com/video/69421653?title=0&amp;byline=0&amp;portrait=0&amp;color=a22c2f" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</div>
</div>
</cms:editable>
</div>
</div>
</div><!--/.item-->
</div><!--/.carousel-inner-->
</div><!--/.carousel-->
<a class="prev hidden-xs" href="#main-slider" data-slide="prev">
<i class="icon-angle-left"></i>
</a>
<a class="next hidden-xs" href="#main-slider" data-slide="next">
<i class="icon-angle-right"></i>
</a>
</section><!--/#main-slider-->

Please help!
Thank you for any reply!!

I think a code like this would be a good start:

Code: Select all

<cms:repeatable name='content_slides' >
   <cms:editable type='image' name='my_image' label='Photo' />
   <cms:editable type='text' name='my_h2' label='title' />
   <cms:editable type='text' name='my_desc' label='description' />
   <cms:editable type='text' name='my_link' label='link to learn more' />
   
</cms:repeatable>


<section id="main-slider" class="no-margin">
      <div class="carousel slide wet-asphalt">
         <ol class="carousel-indicators">
            <cms:show_repeatable 'content_slides'>
               <li data-target="#main-slider" data-slide-to="<cms:show k_count/>" <cms:if k_count='1'>class="active"</cms:if>></li>
            </cms:show_repeatable>
         </ol>

         <div class="carousel-inner">
            <cms:show_repeatable 'content_slides'>
               <div class="item <cms:if k_count='1'>active</cms:if>" style="background-image: url(<cms:show my_image/>)">
                  <div class="container">
                     <div class="row">
                        <div class="col-sm-12">
                           <div class="carousel-content centered">
                              <h2 class="animation animated-item-1"><cms:show my_h2/></h2>
                              <p class="boxed animation animated-item-2"><cms:show my_desc/></p>
                              <br>
                              <!--BUTTON LEARN MORE!!!-->
                              <a class="btn btn-md animation animated-item-3" href="<cms:show my_link/>">Learn More</a>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </cms:show_repeatable>
         
            
         </div><!--/.carousel-inner-->
      </div><!--/.carousel-->
   <a class="prev hidden-xs" href="#main-slider" data-slide="prev">
      <i class="icon-angle-left"></i>
   </a>
   <a class="next hidden-xs" href="#main-slider" data-slide="next">
      <i class="icon-angle-right"></i>
   </a>
</section><!--/#main-slider-->

I think a code like this would be a good start:

Code: Select all

<cms:repeatable name='content_slides' >
   <cms:editable type='image' name='my_image' label='Photo' />
   <cms:editable type='text' name='my_h2' label='title' />
   <cms:editable type='text' name='my_desc' label='description' />
   <cms:editable type='text' name='my_link' label='link to learn more' />
   
</cms:repeatable>


<section id="main-slider" class="no-margin">
      <div class="carousel slide wet-asphalt">
         <ol class="carousel-indicators">
            <cms:show_repeatable 'content_slides'>
               <li data-target="#main-slider" data-slide-to="<cms:show k_count/>" <cms:if k_count='1'>class="active"</cms:if>></li>
            </cms:show_repeatable>
         </ol>

         <div class="carousel-inner">
            <cms:show_repeatable 'content_slides'>
               <div class="item <cms:if k_count='1'>active</cms:if>" style="background-image: url(<cms:show my_image/>)">
                  <div class="container">
                     <div class="row">
                        <div class="col-sm-12">
                           <div class="carousel-content centered">
                              <h2 class="animation animated-item-1"><cms:show my_h2/></h2>
                              <p class="boxed animation animated-item-2"><cms:show my_desc/></p>
                              <br>
                              <!--BUTTON LEARN MORE!!!-->
                              <a class="btn btn-md animation animated-item-3" href="<cms:show my_link/>">Learn More</a>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </cms:show_repeatable>
         
            
         </div><!--/.carousel-inner-->
      </div><!--/.carousel-->
   <a class="prev hidden-xs" href="#main-slider" data-slide="prev">
      <i class="icon-angle-left"></i>
   </a>
   <a class="next hidden-xs" href="#main-slider" data-slide="next">
      <i class="icon-angle-right"></i>
   </a>
</section><!--/#main-slider-->

Saskia, THANK YOU! it works perfectly fine, thank you for your help

you're welcome

This is my code, same with above, but can't runing well


<cms:repeatable name='content_slides' >
<cms:editable type='image' name='my_image' label='Photo' />
<cms:editable type='text' name='my_h2' label='title' />
<cms:editable type='text' name='my_desc' label='description' />
<cms:editable type='text' name='my_link' label='link to learn more' />

</cms:repeatable>


<section id="main-slider" class="no-margin">
<div class="carousel slide wet-asphalt">
<ol class="carousel-indicators">
<cms:show_repeatable 'content_slides'>
<li data-target="#main-slider" data-slide-to="<cms:show k_count/>" <cms:if k_count='1'>class="active"</cms:if>></li>
</cms:show_repeatable>
</ol>

<div class="carousel-inner">
<cms:show_repeatable 'content_slides'>
<div class="item <cms:if k_count='1'>active</cms:if>" style="background-image: url(<cms:show my_image/>)">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="carousel-content centered">
<h2 class="animation animated-item-1"><cms:show my_h2/></h2>
<p class="boxed animation animated-item-2"><cms:show my_desc/></p>
<br>
<!--BUTTON LEARN MORE!!!-->
<a class="btn btn-md animation animated-item-3" href="<cms:show my_link/>">Learn More</a>
</div>
</div>
</div>
</div>
</div>
</cms:show_repeatable>


</div><!--/.carousel-inner-->
</div><!--/.carousel-->
<a class="prev hidden-xs" href="#main-slider" data-slide="prev">
<i class="icon-angle-left"></i>
</a>
<a class="next hidden-xs" href="#main-slider" data-slide="next">
<i class="icon-angle-right"></i>
</a>
</section><!--/#main-slider-->

[KK]

@yonisetiawan, I tried out your code.
The repeatable regions seem to getting defined just fine and the cms:show_repeatable tag is also fetching data back from the regions as expected.

So if the slideshow still does not work, that becomes a front-end issue.

I suggest you please start by placing a static slideshow (with at least a couple of slides) in your template. Let everything be completely hard-coded. See if it works as expected. Once that is confirmed, isolate a single slide and wrap around it the cms:show_repeatable tag and use the variables instead of the hard-coded values.

At this point, the dynamic version should work exactly as the static version.
if it does not, do a view-source and take a look at the generated HTML to see what is going amiss.

Hope it helps.

@KK

you have complate file about slide show. can you give me to my study