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
this works fine, but if I strip out rthe hardcoded image, then the slider doesnt show anything on the page
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?
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?