I've been working on a jQuery slideshow project and have encountered an issue where a hidden element is not showing up as expected. Below is the code I'm using:
<section id="content">
<div id="jumbotron">
<div class="slide" class="first-slide">
<img src="IMG/Jellyfish.jpg" class="large">
</div>
<div class="slide">
<img src="IMG/Koala.jpg" class="large">
</div>
<div class="slide">
<img src="IMG/Penguins.jpg" class="large">
</div>
</div>
</section>
CSS:
.slide{
display:none;
}
div.first-slide{
display:block;
}
I'm puzzled as to why the first image is not displaying, especially after setting it to display: block. Can anyone shed some light on this issue for me?
Any help would be greatly appreciated. Thanks!