CODEWITHSUNDEEP
jqueryhtmlcss
Antny
Antny

Reputation: 39

Issues making slide show. display none?

I am trying to make a slide show using jQuery but I can't get an element to show up once it is hidden. Here is my code:

<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;
}

Why is it that the first image is not showing up ? I thought the display: block would override dispay: hidden.

Could someone please answer this question? Thanks!

Upvotes: 1

Views: 524

Answers (1)

haxtbh
haxtbh

Reputation: 3534

You have used the class attribute twice. You need to put the css classes in one class attribute.

So

    <div class="slide" class="first-slide">
        <img src="IMG/Jellyfish.jpg" class="large">
    </div>

Would become

    <div class="slide first-slide" >
        <img src="IMG/Jellyfish.jpg" class="large">
    </div>

Alternatively if you always show the first image then do not put a class on the div at all.

    <div>
        <img src="IMG/Jellyfish.jpg" class="large">
    </div>

Upvotes: 5

Related Questions