CouchCMS • View topic - Dynamic Repeatable slider

Problems, need help? Have a tip or advice? Post it here.

6 posts Page 1 of 1

Dynamic Repeatable slider

: amitb; Registered User

: Posts: 3; Joined: Tue Jul 22, 2014 4:29 pm

by amitb » Mon Jun 06, 2016 5:54 pm

Here is my html code

<div id="homeCarousel" class="carousel slide carousel-home" data-ride="carousel">


<ol class="carousel-indicators">
<li data-target="#homeCarousel" data-slide-to="0" class="active"></li>
<li data-target="#homeCarousel" data-slide-to="1"></li>
<li data-target="#homeCarousel" data-slide-to="2"></li>
</ol>

<div class="carousel-inner" role="listbox">

<div class="item active">

<img src="assets/images/slider/home-slider-1.jpg" alt="">

<div class="container">

<div class="carousel-caption">

<h2 class="carousel-title bounceInDown animated slow">Because they need your help</h2>
<h4 class="carousel-subtitle bounceInUp animated slow ">Do not let them down</h4>
<a href="#" class="btn btn-lg btn-secondary hidden-xs bounceInUp animated slow" data-toggle="modal" data-target="#donateModal">DONATE NOW</a>

</div> 

</div>

</div> 

<div class="item ">

<img src="assets/images/slider/home-slider-2.jpg" alt="">

<div class="container">

<div class="carousel-caption">

<h2 class="carousel-title bounceInDown animated slow">Together we can improve their lives</h2>
<h4 class="carousel-subtitle bounceInUp animated slow"> So let's do it !</h4>
<a href="#" class="btn btn-lg btn-secondary hidden-xs bounceInUp animated" data-toggle="modal" data-target="#donateModal">DONATE NOW</a>

</div> 

</div>

</div> 

<div class="item ">

<img src="assets/images/slider/home-slider-3.jpg" alt="">

<div class="container">

<div class="carousel-caption">

<h2 class="carousel-title bounceInDown animated slow" >A penny is a lot of money, if you have not got a penny.</h2>
<h4 class="carousel-subtitle bounceInUp animated slow">You can make the diffrence !</h4>
<a href="#" class="btn btn-lg btn-secondary hidden-xs bounceInUp animated slow" data-toggle="modal" data-target="#donateModal">DONATE NOW</a>

</div> 

</div>

</div> 

</div>

<a class="left carousel-control" href="#homeCarousel" role="button" data-slide="prev">
<span class="fa fa-angle-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>

<a class="right carousel-control" href="#homeCarousel" role="button" data-slide="next">
<span class="fa fa-angle-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>

</div>

And this is after trying in couch

<?php require_once( 'couch/cms.php' ); ?>
<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'/>

</cms:repeatable>
<!DOCTYPE html>
------------------
------------------
<div id="homeCarousel" class="carousel slide carousel-home" data-ride="carousel">


<ol class="carousel-indicators">
<cms:show_repeatable ''>
<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" role="listbox">

<div class="item <cms:if k_count='1'>active</cms:if>" style="background-image: url(<cms:show my_image/>">

<div class="container">

<div class="carousel-caption">

<h2 class="carousel-title bounceInDown animated slow" ><cms:show my_h2/></h2>
<h4 class="carousel-subtitle bounceInUp animated slow"><cms:show my_desc/></h4>
<a href="<cms:show my_link/>" class="btn btn-lg btn-secondary hidden-xs bounceInUp animated slow" data-toggle="modal" data-target="#donateModal">DONATE NOW</a>

</div> 

</div>

</div> 

</div>

<a class="left carousel-control" href="#homeCarousel" role="button" data-slide="prev">
<span class="fa fa-angle-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>

<a class="right carousel-control" href="#homeCarousel" role="button" data-slide="next">
<span class="fa fa-angle-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>

</div>

Re: Dynamic Repeatable slider

: Bartonsweb; Registered User

: Posts: 199; Joined: Fri May 09, 2014 9:44 pm

by Bartonsweb » Mon Jun 06, 2016 6:36 pm

Please in future try to post your code inside of the Code tags, it makes it far easier to debug.

You do not have <cms:template> tags in your template, meaning you did not define the template, does it even show in the admin panel? Next, you defined ALL of your editables inside the repeatable region, meaning they are all displayed inside that in the panel, too.
Your current code:

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'/>
</cms:repeatable>

What your code should look like (Assuming, from your markup):

Code: Select all

<cms:template name='TEMPLATENAMEHERE'>
   <cms:repeatable name='content_slides'>
      <cms:editable type='image' name='my_image' label='Photo'/>
   </cms:repeatable>

   <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'/>
</cms:template>

If you are meaning to have all of the editable regions in the repeatable section, then that code is wrong and you were closer to the solution (Missing template tags), use the code below:

Code: Select all

<cms:template name='TEMPLATENAMEHERE'>
   <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'/>
   </cms:repeatable>
</cms:template>

Also, not sure what you are trying to do here:

Code: Select all

<div class="item <cms:if k_count='1'>active</cms:if>" style="background-image: url(<cms:show my_image/>">

but there is no k_count because you're not iterating through any sort of tag i.e pages, repeatable, repeat etc. I'm not entirely sure what you're trying to do with that piece of code so can't offer any kind of fixes, just that k_count won't work. Your block of code to show the repeatable and output the slides looks correct, but you need to add the name parameter to the repeatable, like this:

Code: Select all

<ol class="carousel-indicators">
<cms:show_repeatable 'content_slides'>

If you did want to repeat the title and description for the carousels caption, then you need to add a second <cms:show_repeatable> in there, wherever you need the captions to be repeated (I can't tell looking at your code). But you cannot use <cms:show my_h2 /> outside of the <cms:show_repeatable> tag if it is defined inside of the repeatable.

I would suggest you look further into the documentation specifically around repeatable regions and also go through the Aurelius tutorial to better understand how to setup couch templates.

http://docs.couchcms.com/concepts/repeatable-regions.html

Re: Dynamic Repeatable slider

: amitb; Registered User

: Posts: 3; Joined: Tue Jul 22, 2014 4:29 pm

by amitb » Tue Jun 07, 2016 12:57 pm

Thank You very much!
Admin is ok
Now it is showing on my page but, another problem is found......the slider is showing in a row

here is my screenshot and code

Code: Select all

<?php require_once( 'couch/cms.php' ); ?>
<cms:template name='slides'>
   <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'/>
   </cms:repeatable>
</cms:template>
<!DOCTYPE html>
<html class="no-js">
    <head>
        <meta charset="utf-8">
        <title>SADAKA | Charity / Non-profit responsive Bootstrap HTML5 template</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- Fonts -->
        <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
        <link href='http://fonts.googleapis.com/css?family=Dosis:400,700' rel='stylesheet' type='text/css'>

        <!-- Bootsrap -->
        <link rel="stylesheet" href="assets/css/bootstrap.min.css">

        <!-- Font awesome -->
        <link rel="stylesheet" href="assets/css/font-awesome.min.css">

        <!-- Owl carousel -->
        <link rel="stylesheet" href="assets/css/owl.carousel.css">

        <!-- Template main Css -->
        <link rel="stylesheet" href="assets/css/style.css">
        
        <!-- Modernizr -->
        <script src="assets/js/modernizr-2.6.2.min.js"></script>


    </head>

    <body>


    <header class="main-header">
        
    
        <nav class="navbar navbar-static-top">

            <div class="navbar-top">

              <div class="container">
                  <div class="row">

                    <div class="col-sm-6 col-xs-12">

                        <ul class="list-unstyled list-inline header-contact">
                            <li> <i class="fa fa-phone"></i> <a href="tel:">+212 658 986 213 </a> </li>
                             <li> <i class="fa fa-envelope"></i> <a href="mailto:contact@sadaka.org">contact@sadaka.org</a> </li>
                       </ul> <!-- /.header-contact  -->
                      
                    </div>

                    <div class="col-sm-6 col-xs-12 text-right">

                        <ul class="list-unstyled list-inline header-social">

                            <li> <a href="#"> <i class="fa fa-facebook"></i> </a> </li>
                            <li> <a href="#"> <i class="fa fa-twitter"></i>  </a> </li>
                            <li> <a href="#"> <i class="fa fa-google"></i>  </a> </li>
                            <li> <a href="#"> <i class="fa fa-youtube"></i>  </a> </li>
                            <li> <a href="#"> <i class="fa fa fa-pinterest-p"></i>  </a> </li>
                       </ul> <!-- /.header-social  -->
                      
                    </div>


                  </div>
              </div>

            </div>

            <div class="navbar-main">
              
              <div class="container">

                <div class="navbar-header">
                  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">

                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>

                  </button>
                  
                  <a class="navbar-brand" href="index.html"><img src="assets/images/sadaka-logo.png" alt=""></a>
                  
                </div>

                <div id="navbar" class="navbar-collapse collapse pull-right">

                  <ul class="nav navbar-nav">

                    <li><a class="is-active" href="index.html">HOME</a></li>
                    <li><a href="about.html">ABOUT</a></li>
                    <li class="has-child"><a href="#">CAUSES</a>

                      <ul class="submenu">
                         <li class="submenu-item"><a href="causes.html">Causes list </a></li>
                         <li class="submenu-item"><a href="causes-single.html">Single cause </a></li>
                         <li class="submenu-item"><a href="causes-single.html">Single cause </a></li>
                         <li class="submenu-item"><a href="causes-single.html">Single cause </a></li>
                      </ul>

                    </li>
                    <li><a href="gallery.html">GALLERY</a></li>
                    <li><a href="contact.html">CONTACT</a></li>

                  </ul>

                </div> <!-- /#navbar -->

              </div> <!-- /.container -->
              
            </div> <!-- /.navbar-main -->


        </nav> 

    </header> <!-- /. main-header -->




    <!-- Carousel
    ================================================== -->
    <div id="homeCarousel" class="carousel slide carousel-home" data-ride="carousel">

          <!-- Indicators -->
          <ol class="carousel-indicators">
          
            <li data-target="#homeCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#homeCarousel" data-slide-to="1"></li>
            <li data-target="#homeCarousel" data-slide-to="2"></li>
            
          </ol>

      <div class="carousel-inner" role="listbox">
<cms:show_repeatable 'content_slides'>
        <div class="item active">

              <img src="<cms:show my_image />" alt="">

              <div class="container">

                <div class="carousel-caption">

                  <h2 class="carousel-title bounceInDown animated slow">"<cms:show my_h2 />"</h2>
                  <h4 class="carousel-subtitle bounceInUp animated slow ">"<cms:show my_desc />"</h4>
                  <a href="<cms:show my_link />" class="btn btn-lg btn-secondary hidden-xs bounceInUp animated slow" data-toggle="modal" data-target="#donateModal">DONATE NOW</a>

                </div> <!-- /.carousel-caption -->

              </div>

        </div> <!-- /.item -->
</cms:show_repeatable>
        </div>

          <a class="left carousel-control" href="#homeCarousel" role="button" data-slide="prev">
            <span class="fa fa-angle-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
          </a>

          <a class="right carousel-control" href="#homeCarousel" role="button" data-slide="next">
            <span class="fa fa-angle-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>

    </div><!-- /.carousel -->

    <div class="section-home about-us fadeIn animated">

        <div class="container">

            <div class="row">

                <div class="col-md-3 col-sm-6">
                
                  <div class="about-us-col">

                        <div class="col-icon-wrapper">
                          <img src="assets/images/icons/our-mission-icon.png" alt="">
                        </div>
                        <h3 class="col-title">our mission</h3>
                        <div class="col-details">

                          <p>Lorem ipsum dolor sit amet consect adipisscin elit proin vel lectus ut eta esami vera dolor sit amet consect</p>
                          
                        </div>
                        <a href="#" class="btn btn-primary"> Read more </a>
                    
                  </div>
                  
                </div>


                <div class="col-md-3 col-sm-6">
                
                  <div class="about-us-col">

                        <div class="col-icon-wrapper">
                          <img src="assets/images/icons/make-donation-icon.png" alt="">
                        </div>
                        <h3 class="col-title">Make donations</h3>
                        <div class="col-details">

                          <p>Lorem ipsum dolor sit amet consect adipisscin elit proin vel lectus ut eta esami vera dolor sit amet consect</p>
                          
                        </div>
                        <a href="#" class="btn btn-primary"> Read more </a>
                    
                  </div>
                  
                </div>


                <div class="col-md-3 col-sm-6">
                
                  <div class="about-us-col">

                        <div class="col-icon-wrapper">
                          <img src="assets/images/icons/help-icon.png" alt="">
                        </div>
                        <h3 class="col-title">Help & support</h3>
                        <div class="col-details">

                          <p>Lorem ipsum dolor sit amet consect adipisscin elit proin vel lectus ut eta esami vera dolor sit amet consect</p>
                          
                        </div>
                        <a href="#" class="btn btn-primary"> Read more </a>
                    
                  </div>
                  
                </div>


                <div class="col-md-3 col-sm-6">
                
                  <div class="about-us-col">

                        <div class="col-icon-wrapper">
                          <img src="assets/images/icons/programs-icon.png" alt="">
                        </div>
                        <h3 class="col-title">our programs</h3>
                        <div class="col-details">

                          <p>Lorem ipsum dolor sit amet consect adipisscin elit proin vel lectus ut eta esami vera dolor sit amet consect</p>
                          
                        </div>
                        <a href="#" class="btn btn-primary"> Read more </a>
                    
                  </div>
                  
                </div>
                

                
            </div>

        </div>
      
    </div> <!-- /.about-us -->

    <div class="section-home home-reasons">

        <div class="container">

            <div class="row">
                
                <div class="col-md-6">

                    <div class="reasons-col animate-onscroll fadeIn">

                        <img src="assets/images/reasons/we-fight-togother.jpg" alt="">

                        <div class="reasons-titles">

                            <h3 class="reasons-title">We fight together</h3>
                            <h5 class="reason-subtitle">We are humans</h5>
                            
                        </div>

                        <div class="on-hover hidden-xs">
                            
                                <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur praesentium, itaque facilis nesciunt ab omnis cumque similique ipsa veritatis perspiciatis, harum ad at nihil molestias, dignissimos sint consequuntur. Officia, fuga.</p>


                                <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur praesentium, itaque facilis nesciunt ab omnis cumque similique ipsa veritatis perspiciatis, harum ad at nihil molestias, dignissimos sint consequuntur. Officia, fuga.</p>

                                <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur praesentium, itaque facilis nesciunt ab omnis cumque similique ipsa veritatis perspiciatis, harum ad at nihil molestias, dignissimos sint consequuntur. Officia, fuga.</p>
                                
                        </div>
                    </div>
                    
                </div>


                <div class="col-md-6">

                    <div class="reasons-col animate-onscroll fadeIn">

                        <img src="assets/images/reasons/we-care-about.jpg" alt="">

                        <div class="reasons-titles">

                            <h3 class="reasons-title">WE care about others</h3>
                            <h5 class="reason-subtitle">We are humans</h5>
                            
                        </div>

                        <div class="on-hover hidden-xs">
                            
                                <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur praesentium, itaque facilis nesciunt ab omnis cumque similique ipsa veritatis perspiciatis, harum ad at nihil molestias, dignissimos sint consequuntur. Officia, fuga.</p>


                                <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur praesentium, itaque facilis nesciunt ab omnis cumque similique ipsa veritatis perspiciatis, harum ad at nihil molestias, dignissimos sint consequuntur. Officia, fuga.</p>

                                <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur praesentium, itaque facilis nesciunt ab omnis cumque similique ipsa veritatis perspiciatis, harum ad at nihil molestias, dignissimos sint consequuntur. Officia, fuga.</p>
                                
                        </div>


                    </div>
                    
                </div>


            </div>
          
  

        </div>
      

    </div> <!-- /.home-reasons -->

    <div class="section-home our-causes animate-onscroll fadeIn">

        <div class="container">

            <h2 class="title-style-1">Our Causes <span class="title-under"></span></h2>

            <div class="row">

                <div class="col-md-3 col-sm-6">

                    <div class="cause">

                        <img src="assets/images/causes/cause-hunger.jpg" alt="" class="cause-img">

                        <div class="progress cause-progress">
                          <div class="progress-bar" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%;">
                            10$ / 500$
                          </div>
                        </div>

                        <h4 class="cause-title"><a href="#">HUNGER AND POVERTY </a></h4>
                        <div class="cause-details">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut at eros rutrum turpis viverra elementum semper quis ex. Donec lorem nulla, aliquam quis neque vel, maximus lacinia urna.
                        </div>

                        <div class="btn-holder text-center">

                          <a href="#" class="btn btn-primary" data-toggle="modal" data-target="#donateModal"> DONATE NOW</a>
                          
                        </div>

                        

                    </div> <!-- /.cause -->
                    
                </div> 

                <div class="col-md-3 col-sm-6">

                    <div class="cause">

                        <img src="assets/images/causes/cause-education.jpg" alt="" class="cause-img">

                        <div class="progress cause-progress">
                          <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
                            400$ / 700$
                          </div>
                        </div>

                        <h4 class="cause-title"><a href="#">EDUCATION AND TRAINING</a></h4>
                        <div class="cause-details">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut at eros rutrum turpis viverra elementum semper quis ex. Donec lorem nulla, aliquam quis neque vel, maximus lacinia urna.
                        </div>

                        <div class="btn-holder text-center">

                          <a href="#" class="btn btn-primary" data-toggle="modal" data-target="#donateModal"> DONATE NOW</a>
                          
                        </div>

                        

                    </div> <!-- /.cause -->
                    
                </div>


                <div class="col-md-3 col-sm-6">

                    <div class="cause">

                        <img src="assets/images/causes/cause-rights.jpg" alt="" class="cause-img">

                        <div class="progress cause-progress">
                          <div class="progress-bar" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%;">
                            400$ / 1000$
                          </div>
                        </div>

                        <h4 class="cause-title"><a href="#">HUMAN RIGHTS</a></h4>
                        <div class="cause-details">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut at eros rutrum turpis viverra elementum semper quis ex. Donec lorem nulla, aliquam quis neque vel, maximus lacinia urna.
                        </div>

                        <div class="btn-holder text-center">

                          <a href="#" class="btn btn-primary" data-toggle="modal" data-target="#donateModal"> DONATE NOW</a>
                          
                        </div>

                        

                    </div> <!-- /.cause -->
                    
                </div>

                <div class="col-md-3 col-sm-6">

                    <div class="cause">

                        <img src="assets/images/causes/cause-culture.jpg" alt="" class="cause-img">

                        <div class="progress cause-progress">
                          <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
                            400$ / 700$
                          </div>
                        </div>

                        <h4 class="cause-title"><a href="#">ARTS AND CULTURE </a></h4>
                        <div class="cause-details">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut at eros rutrum turpis viverra elementum semper quis ex. Donec lorem nulla, aliquam quis neque vel, maximus lacinia urna.
                        </div>

                        <div class="btn-holder text-center">

                          <a href="#" class="btn btn-primary" data-toggle="modal" data-target="#donateModal"> DONATE NOW</a>
                          
                        </div>

                        

                    </div> <!-- /.cause -->
                    
                </div>

            </div>

        </div>
        
    </div> <!-- /.our-causes -->

    




    <div class="section-home our-sponsors animate-onscroll fadeIn">
    
        <div class="container">

            <h2 class="title-style-1">Our Sponsors <span class="title-under"></span></h2>

            <ul class="owl-carousel list-unstyled list-sponsors">

              <li> <img src="assets/images/sponsors/bus.png" alt=""></li>
              <li> <img src="assets/images/sponsors/wikimedia.png" alt=""></li>
              <li> <img src="assets/images/sponsors/one-world.png" alt=""></li>
              <li> <img src="assets/images/sponsors/wikiversity.png" alt=""></li>
              <li> <img src="assets/images/sponsors/united-nations.png" alt=""></li>

              <li> <img src="assets/images/sponsors/bus.png" alt=""></li>
              <li> <img src="assets/images/sponsors/wikimedia.png" alt=""></li>
              <li> <img src="assets/images/sponsors/one-world.png" alt=""></li>
              <li> <img src="assets/images/sponsors/wikiversity.png" alt=""></li>
              <li> <img src="assets/images/sponsors/united-nations.png" alt=""></li>

            </ul>

        </div>

    </div> <!-- /.our-sponsors -->


    


    <footer class="main-footer">

        <div class="footer-top">
            
        </div>


        <div class="footer-main">
            <div class="container">
                
                <div class="row">
                    <div class="col-md-4">

                        <div class="footer-col">

                            <h4 class="footer-title">About us <span class="title-under"></span></h4>

                            <div class="footer-content">

                                <p>
                                    <strong>Sadaka</strong> ipsum dolor sit amet, consectetur adipiscing elit. Ut at eros rutrum turpis viverra elementum semper quis ex. Donec lorem nulla, aliquam quis neque vel, maximus lacinia urna.
                                </p> 

                                <p>
                                    ILorem ipsum dolor sit amet, consectetur adipiscing elit. Ut at eros rutrum turpis viverra elementum semper quis ex. Donec lorem nulla, aliquam quis neque vel, maximus lacinia urna.
                                </p>

                            </div>
                            
                        </div>

                    </div>

                    <div class="col-md-4">

                        <div class="footer-col">

                            <h4 class="footer-title">LAST TWEETS <span class="title-under"></span></h4>

                            <div class="footer-content">
                                <ul class="tweets list-unstyled">
                                    <li class="tweet"> 

                                        20 Surprise Eggs, Kinder Surprise Cars 2 Thomas Spongebob Disney Pixar  http://t.co/fTSazikPd4 

                                    </li>

                                    <li class="tweet"> 

                                        20 Surprise Eggs, Kinder Surprise Cars 2 Thomas Spongebob Disney Pixar  http://t.co/fTSazikPd4 

                                    </li>

                                    <li class="tweet"> 

                                        20 Surprise Eggs, Kinder Surprise Cars 2 Thomas Spongebob Disney Pixar  http://t.co/fTSazikPd4 

                                    </li>

                                </ul>
                            </div>
                            
                        </div>

                    </div>


                    <div class="col-md-4">

                        <div class="footer-col">

                            <h4 class="footer-title">Contact us <span class="title-under"></span></h4>

                            <div class="footer-content">

                                <div class="footer-form">
                                    
                                    <div class="footer-form" >
                                    
                                    <form action="php/mail.php" class="ajax-form">

                                        <div class="form-group">
                                            <input type="text" name="name" class="form-control" placeholder="Name" required>
                                        </div>

                                         <div class="form-group">
                                            <input type="email" name="email" class="form-control" placeholder="E-mail" required>
                                        </div>

                                        <div class="form-group">
                                            <textarea name="message" class="form-control" placeholder="Message" required></textarea>
                                        </div>

                                        <div class="form-group alerts">
                        
                                            <div class="alert alert-success" role="alert">
                                              
                                            </div>

                                            <div class="alert alert-danger" role="alert">
                                              
                                            </div>
                                            
                                        </div>

                                         <div class="form-group">
                                            <button type="submit" class="btn btn-submit pull-right">Send message</button>
                                        </div>
                                        
                                    </form>

                                </div>

                                </div>
                            </div>
                            
                        </div>

                    </div>
                    <div class="clearfix"></div>



                </div>
                
                
            </div>

            
        </div>

        <div class="footer-bottom">

            <div class="container text-right">
                Sadaka @ copyrights 2015 - by <a href="http://www.ouarmedia.com" target="_blank">Ouarmedia</a>
            </div>
        </div>
        
    </footer> <!-- main-footer -->




    <!-- Donate Modal -->
    <div class="modal fade" id="donateModal" tabindex="-1" role="dialog" aria-labelledby="donateModalLabel" aria-hidden="true">

      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="donateModalLabel">DONATE NOW</h4>
          </div>
          <div class="modal-body">

                <form class="form-donation">

                        <h3 class="title-style-1 text-center">Thank you for your donation <span class="title-under"></span>  </h3>

                        <div class="row">

                            <div class="form-group col-md-12 ">
                                <input type="text" class="form-control" id="amount" placeholder="AMOUNT(€)">
                            </div>

                        </div>


                        <div class="row">
                            <div class="form-group col-md-6">
                                <input type="text" class="form-control" name="firstName" placeholder="First name*">
                            </div>

                            <div class="form-group col-md-6">
                                <input type="text" class="form-control" name="lastName" placeholder="Last name*">
                            </div>
                        </div>


                        <div class="row">

                            <div class="form-group col-md-6">
                                <input type="text" class="form-control" name="email" placeholder="Email*">
                            </div>

                            <div class="form-group col-md-6">
                                <input type="text" class="form-control" name="phone" placeholder="Phone">
                            </div>

                        </div>

                        <div class="row">

                            <div class="form-group col-md-12">
                                <input type="text" class="form-control" name="address" placeholder="Address">
                            </div>

                        </div>


                        <div class="row">

                            <div class="form-group col-md-12">
                                <textarea cols="30" rows="4" class="form-control" name="note" placeholder="Additional note"></textarea>
                            </div>

                        </div>

                        <div class="row">

                            <div class="form-group col-md-12">
                                <button type="submit" class="btn btn-primary pull-right" name="donateNow" >DONATE NOW</button>
                            </div>

                        </div>



                       
                    
                </form>
            
          </div>
        </div>
      </div>

    </div> <!-- /.modal -->





    <!--  Scripts
    ================================================== -->

    <!-- jQuery -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="assets/js/jquery-1.11.1.min.js"><\/script>')</script>

    <!-- Bootsrap javascript file -->
    <script src="assets/js/bootstrap.min.js"></script>
    
    <!-- owl carouseljavascript file -->
    <script src="assets/js/owl.carousel.min.js"></script>

    <!-- Template main javascript -->
    <script src="assets/js/main.js"></script>

    <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
    <script>
        (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
        function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
        e=o.createElement(i);r=o.getElementsByTagName(i)[0];
        e.src='//www.google-analytics.com/analytics.js';
        r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
        ga('create','UA-XXXXX-X');ga('send','pageview');
    </script>

    </body>
</html>
<?php COUCH::invoke(); ?>

Attachments

Re: Dynamic Repeatable slider

: Bartonsweb; Registered User

: Posts: 199; Joined: Fri May 09, 2014 9:44 pm

by Bartonsweb » Tue Jun 07, 2016 6:04 pm

Thank you, this helps a bit.. I'm not familiar with this slider code so could you post a snippet of html of the slider with a few slides in it without any couch tags? I think this is likely just a case of moving a few tags around so the repeating section works correctly. Nice design, btw.

Re: Dynamic Repeatable slider

: genxcoders; Registered User

: Posts: 705; Joined: Sat Sep 28, 2013 3:39 am; Location: Nagpur

by genxcoders » Sat Jun 11, 2016 11:55 pm

Please try making the following changes in your "homeCarousel":

Code: Select all

<div id="homeCarousel" class="carousel slide carousel-home" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <cms:show_repeatable 'hp_banner'>
            <li data-target="#homeCarousel" data-slide-to="<cms:show k_count />" <cms:if k_count=="1">class="active"<cms:else />class=""</cms:if> ></li>
        </cms:show_repeatable>
        <!-- Remove From Here -->
        <li data-target="#homeCarousel" data-slide-to="1"></li>
        <li data-target="#homeCarousel" data-slide-to="2"></li>
        <!-- Remove Till Here -->
    </ol>
    <div class="carousel-inner" role="listbox">
        <cms:show_repeatable 'content_slides'>
            <cms:if k_count=='1'>
            <div class="item active">
            <cms:else />
            <div class="item">
            </cms:if>
                <img src="<cms:show my_image />" alt="">
                <div class="container">
                    <div class="carousel-caption">
                        <h2 class="carousel-title bounceInDown animated slow">"<cms:show my_h2 />"</h2>
                        <h4 class="carousel-subtitle bounceInUp animated slow ">"<cms:show my_desc />"</h4>
                        <a href="<cms:show my_link />" class="btn btn-lg btn-secondary hidden-xs bounceInUp animated slow" data-toggle="modal" data-target="#donateModal">DONATE NOW</a>
                    </div> <!-- /.carousel-caption -->
                </div>
            </div> <!-- /.item -->
        </cms:show_repeatable>
    </div>
    <a class="left carousel-control" href="#homeCarousel" role="button" data-slide="prev">
        <span class="fa fa-angle-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#homeCarousel" role="button" data-slide="next">
        <span class="fa fa-angle-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

I hope that will solve the problem you are facing.

Explanation to the changes:
1. You are using the "Indicators" (small dots at the bottom of the Carousel) they are identified by the "data-slide-to" attribute for identifying the images. the <cms:show k_count /> helps you achieve the changing numbers which start by default at 0.
2. The class="active" is being set on each indicator depending which image is in displayed. so I have applied condition there.

Code: Select all

<cms:if k_count==1>class="active"</cms:if>

This condition makes sure that only one indicator is active, in reference to the display image.
3. The same class=active is also available on each item (image and text content) of the image currently, because when the repeatable region outputs the images, it applies the active to each item. The main reason why all images are displayed at once. To handle the same, I made the following changes:

Code: Select all

<cms:if k_count=='1'>
    <div class="item active">
<cms:else />
    <div class="item">
</cms:if>

The change actually makes sure that the same item is active as the data-slide-to is active. if you see the original HTML coding of the carousel, the active class is applied to the item which is in visible display. And the repeatable region is applying the class=active to all the images.

If you want any more clarification, please respond here. I am sure you will get help!

Regards,

where innovation meets technology

Last edited by genxcoders on Wed Jun 07, 2017 3:05 pm, edited 1 time in total.

Re: Dynamic Repeatable slider

: genxcoders; Registered User

: Posts: 705; Joined: Sat Sep 28, 2013 3:39 am; Location: Nagpur

by genxcoders » Sun Jun 12, 2016 12:04 am

You can also do the following for a more organized view of the Admin:

You current editable:

Code: Select all

<cms:editable type='image' name='my_image' label='Photo'/>

Suggested editable (only for image):

Code: Select all

<cms:editable type='image' name='my_image' label='Photo' show_preview='1' preview_width='100' input_width='50'/>

Regards,

where innovation meets technology

Post a reply

Previous Next

6 posts Page 1 of 1

Return to Bug Reporting and Troubleshooting