Creating a Content Slider using jQuery, HTML and CSS

There’s a tutorial on making an image slider that I keep referring back to again and again. It’s by Soh Tanaka, a Los Angeles designer developer. I love it’s simplicity. Check it out at (no longer published http://www.sohtanaka.com/web-design/automatic-image-slider-w-css-jquery/http://www.htmldrive.net/items/show/6/Automatic-Image-Slider-with-CSS-jQueryred .
Having an image slider is an effective home page tool. But my clients lately have been stressing fast uploading time. With an image slider, the images are rather large. To reduce load time, I’ve altered the image slider into a content slider. It just took a few changes to Soh Tanaka’s code to use divs instead of imgs.
Soh Slider
Here’s my alteration at RedwoodLandscape.com
Content Slider
Here’s Soh Tanaka’s HTML:
<div class="window">
<div class="image_reel"><a href="#"><img src="reel_1.jpg" alt="" /></a> <a href="#"><img src="reel_2.jpg" alt="" /></a> <a href="#"><img src="reel_3.jpg" alt="" /></a> <a href="#"><img src="reel_4.jpg" alt="" /></a></div>
<div></div>
</div>
And here’s my alteration which swaps images with divs containing content:
<div class="window">
<div class="image_reel">
<div class="featured"><!-- Content for slide 1 goes here --> <img src="images/featured1.jpg" alt="" width="400" height="250" />
<h2>Heading for Slide 1</h2>
<div>Content for Slide 1 <span>read more button</span></div>
<div></div>
</div>
<div class="featured">
<div>
<div class="featured"><!-- Content for slide 2 goes here --> <img src="images/featured2.jpg" alt="" width="400" height="250" />
<h2>Heading for Slide 2</h2>
<div>Content for Slide 2 <span>read more button</span></div>
<div></div>
</div>
<div class="featured">
<div>
<div class="featured"><!-- Content for slide 3 goes here --> <img src="images/featured3.jpg" alt="" width="400" height="250" />
<h2>Heading for Slide 3</h2>
<div>Content for Slide 3 <span>read more button</span></div>
<div></div>
</div>
<div class="featured"></div>
</div>
</div>
</div>
</div>
</div>
</div>
And likewise, Soh has styles for images:
.image_reel img {float: left;}
…which I’ve altered and added to:
.image_reel div {float: left;}
div.featured {height:286;width:860px;}
In my example, you’ll see a button for “Read More” but actually, the entire div has an anchor tag. If you give the button an anchor tag, you break the slider. I’ve tried several variations to fix this, but to keep the pause-on-hover effect, the div has to be the only content with an anchor tag.
There’s one more step. In Soh’s jQuery script, there is one place where you need to change “img” to “div”.
var imageSum = $(".image_reel div").size();
That’s all there is to it. You can add and style any content inside the divs as long as they aren’t links. Remember that the whole div is a link.
Happy sliding!
Gloria Wadzinski

About Gloria Wadzinski

Gloria Wadzinski is a multimedia designer specializing in graphic design, website design and video production. She currently lives in Boulder, Colorado. View Gloria's contact information and portfolio at http://gloriaw.net.
Web Development, , , Permalink

One Response to Creating a Content Slider using jQuery, HTML and CSS

  1. karthik says:

    good one

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>