Creating a jQuery Slideshow – Styling with CSS

In this post series we’re creating a jQuery Slideshow from scratch. In the last post we added basic arrow navigation. In this post we’ll take a break from the functionality of the slideshow and add some style using CSS.

Note: The jsFiddle at the bottom of this post is a composite of all previous posts on this jQuery Slideshow.

CSS Positioning and Z-index

In our current slideshow, the navigational arrows are underneath the images and have no styling. They just sit there, “floating left”. We’re going to move those arrows on top of the slideshow to give it a better look.

First, we’ll need to edit the current CSS:

#slideshow { max-height:300px; max-width:300px; }
#holder { height:300px; width:300px; }

We’re going to add a property to the “holder” Div:

#holder { height:300px; width:300px; position:relative; }

This will allow us to add Divs inside of the “holder” Div and make them positioned absolutely. If you’ve never dealt with the CSS “position” property, the basic idea is simple:

Position:absolute – This make the Div relative to the first parent Div that has a position property set.
Position:fixed – This makes the Div fixed on the page, regardless of scrolling.
Position:relative – This moves the Div relative to where it should be on the page.

And now we’ll add two new Divs for the arrows:

#leftArrowD { position:absolute; left:0px; top:0px; height:inherit; width:50px; z-index:9;}
#rightArrowD { position:absolute; right:0px; top:0px; height:inherit; width:50px; z-index:9;}

Let’s take a look at what we’ve done. The position:absolute property added to both removes this Div from the natural flow of the page. If nothing else was set, this Div would be at the top left corner of the first parent Div that has its position property set. Remember, we just set the “holder” Div’s position property to relative so that this Div will relate itself to our “holder” Div, not to the page. But we’ll also want to set where each Div shows up. So we’ll make the left arrow be on the left side, left:0px, and the right arrow be on the right side, right:0px. We’ll set both Divs to start at the top, top:0px.

Next we’ll set the height to inherit from the “holder” Div. This makes it so we don’t have to resize this Div if we resize the slideshow. The width is set to 50 pixels, the width of one arrow.

Finally, we come to the z-index property. We’ll need to make one more change to the CSS to make this property work:

#slideshow { max-height:300px; max-width:300px; position:relative; z-index:1; }

This time, we’re adding position:relative so that the z-index property will apply. If we left it off, none of our z-indexes would work and we’d get frustrated and possibly punch someone. So don’t forget this vital CSS. After that, we add z-index:1 to this Div (the lower the number, the further “back” it is). The z-index on our arrows was 9, so the arrows will show on top of the images.

Also, I added a few other things to the CSS:

#holder { height:300px; width:300px; position:relative; text-align:center; background-color:#333;}

That sets a background color and will center the image.

And that finishes our CSS! Now let’s change the HTML to fit. The finished CSS can be found in the jsFiddle at the bottom of this post.

The HTML

The HTML is very simple. Add the two Divs inside of our “holder” Div and move the arrow images to inside these Divs (lines 2 and 3):

<Div id="holder"> 
     <div id="leftArrowD">
         <img src='http://kimjoyfox.com/wp-content/uploads/arrowLeftGrey.png' id='leftArrow' />
     </div> 
     <div id="rightArrowD">
         <img src='http://kimjoyfox.com/wp-content/uploads/arrowRightGrey.png' id='rightArrow' />
     </div> 
<img src="http://kimjoyfox.com/wp-content/uploads/drwho8.jpg" id="slideshow" /> 
</Div>

Centering the Arrows

Now that we’ve got the arrows within the Div, the Divs floating nicely on top of the slideshow, but let’s move the arrows down so that they show in the center of the image (height-wise).

We’ll add just a little more to the CSS:

#leftArrow, #rightArrow { top:41%; position:absolute;}

This will add move the arrows down so that they will float in the center of the Div.

Note: in CSS, if you have two Divs that have the same property, you can list those Divs, separated by a comma, before the property, like we did above.

Snazzy Fade Effect

We could stop there, but let’s go a step further and add some snazzy fading options.

Currently, the arrows simply sit on top of the images. Well that ain’t pretty. We’ll add a hover effect using jQuery.

//function for fading in and out the arrows
    $('#leftArrowD, #rightArrowD').hover(function(){
        $(this).stop().animate({
            opacity: 1,
        })
        }, function() {
            $(this).stop().animate({
                opacity:0,
            })
        }
     )

When the user hovers over the arrow, it fades in; when they hover off, it fades back out. Again, the two arrows, leftArrowD and rightArrowD are both referenced at the beginning of this function with a comma in-between.

You could also switch the coding slightly if you wanted both arrows to fade in when you hover over one:

//function for fading in and out the arrows
    $('#leftArrowD, #rightArrowD').hover(function(){
        $('#leftArrowD, #rightArrowD').stop().animate({
            opacity: 1,
        })
        }, function() {
            $('#leftArrowD, #rightArrowD').stop().animate({
                opacity:0,
            })
        }
     )

Beautifully simple, isn’t it?