I recently added Snook's Simple jQuery Slideshow feature to my Bootstrap 3 website.
If you want to see it in action, click on this link:
Oddly enough, the row containing the slideshow is not displaying correctly as its height is registering at 0. This issue is causing all the text following the slideshow to overlap with the images.
Here is a snippet of my code:
<div class="row bottom-margin">
<div class="slideshow">
<img class="img-responsive" src="Splash1.jpg">
<img class="img-responsive" src="Splash2.jpg">
</div>
</div>
...
<script>
$(function(){
$('.slideshow > :gt(0)').hide();
setInterval(function(){$('.slideshow > :first-child').fadeOut().next().fadeIn().end().appendTo('.slideshow');}, 5000);
});
</script>
Here is the CSS used for styling:
.slideshow {
position: relative;
}
.slideshow > * {
position: absolute;
left: 0;
top: 0;
}
After some troubleshooting, I discovered that the issue with the div height could be caused by floating children elements, but I don't think that applies to my case. Admittedly, I am new to web development and still learning.
Any assistance would be greatly appreciated!