I have created a craousel using bootstrap and couch and it works perfectly if I hardcode a image into the slider before I list the images from couch, but if I remove the hard coded image then the slider does not show

heres my code with the hardcoded image in

Code: Select all

<div id="myCarousel" class="carousel" data-ride="carousel" data-interval="3000">
    <div class="carousel-inner">
       /* hard coded image---*/
       <div class="item active">
            <img src="images/carousel/thisCouldBeYou.jpg">
       </div>
      <cms:pages masterpage="carousel.php" include_subfolders='0' order='1' order_by='order' />
            <div class="item">
            <img src="<cms:show gg_image />">
             </div>  
         </cms:pages> 
     </div><!-- /.carousel-inner -->
     <!-- Controls -->
     <a class="left carousel-control" href="#myCarousel" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
     </a>
     <a class="right carousel-control" href="#myCarousel" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>  
</div>

this works fine, but if I strip out rthe hardcoded image, then the slider doesnt show anything on the page

Code: Select all

<div id="myCarousel" class="carousel" data-ride="carousel" data-interval="3000">
    <div class="carousel-inner">
      <cms:pages masterpage="carousel.php" include_subfolders='0' order='1' order_by='order' />
      <div class="item">
      <img src="<cms:show gg_image />">
       </div>  
         </cms:pages> 
     </div><!-- /.carousel-inner -->
     <!-- Controls -->
     <a class="left carousel-control" href="#myCarousel" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
     </a>
     <a class="right carousel-control" href="#myCarousel" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>  
</div>

anybody got any clues?

EDIT
jusrt been testing again and the images do load, but not untill all images have loaded which can take 5-10 seconds after the page has finishjed loading. The images are only 40+kb in size but there are 16 of them, is there any way to load the slider on the page once one image has loaded?

[KK]

The images are only 40+kb in size but there are 16 of them, is there any way to load the slider on the page once one image has loaded?

Barry, that is a front-end issue and really outside the purview of Couch (?which only serves to output the HTML).

That said, it is a issue nevertheless. I am sure somebody from our community will have a solution for you.

hi Barry - not a solution so much as a suggestion - I happen to have been looking at Royal Slider today as a potential resource for client sites. It may not be free - but sometimes you get what you pay for. And this plugin has "smart lazy loading" - plus it supports touch swipe for phones which appeals to me. Could be worth a look!