Easy way to Slide Images with Overlay Caption ...

Today i found an article on Images with Overlay caption while reading feed of queness. Moreover , I previosly did one article on Lightest content slider ever which was really cool. Now , today i tried mixing these two tutorials and made one. That means I found the easy and light image slider. Pretty interesting, isnt it? So without wasting much time , lets start.

Here is the DEMO

The trick is simple , I just filled div mystuff with content inside div wrapper and tweaked little CSS of mystuff class.
Here is the html place it inside your body tag of your web page:

 <div id="button">
   <a class="button1 active" rel="1" href="#"></a>
   <a class="button2" rel="2" href="#"></a>
   <a class="button3" rel="3" href="#"></a>
 </div> <!-- end of div button-->
 
 <div class="clear"></div>
 
 <div id="myslide">
  <div class="cover">
 
   <div class="mystuff">
    <img src=wolf.jpg />
    <div class= wouldescription>
     <p class= wouldescription_content>This is image one. The pack, the basic unit of wolf social life, is usually a family group. It is made up of animals related to each other by blood and family ties of affection and mutual aid. </p>
    </div>
   </div>
 
   <div class="mystuff">
    <img src=wolf1.jpg />
    <div class= wouldescription>
     <p class= wouldescription_content>This is image two. The basic unit of wolf social life, is usually a family group. It is made up of animals related to each other by blood and family ties of affection and mutual aid. </p>
    </div>
   </div>
 
   <div class="mystuff">
    <img src=wolf2.jpg />
    <div class= wouldescription>
     <p class= wouldescription_content>This is image three. The basic unit of wolf social life, is usually a family group. It is made up of animals related to each other by blood and family ties of affection and mutual aid. </p>
    </div>
   </div>
 
  </div> <!-- end of div cover -->
 </div>  <!-- end of div myslide -->

Here is the CSS (little tweaked) , Place it inside your stylesheet:

#myslide {width:425px;overflow:hidden;position: relative;height:276px;margin-bottom:20px}
#myslide .cover{
  width:1275px; /*------- class mystuff width * number of mystuff divs (425 * 3 = 480)---------- */
  position: absolute;
  height:276px;
 }
 
 #myslide .mystuff {width:425px;float:left;padding:20px 0;}
 
 .button1,.button2,.button3{background:#999;padding:6px;display:block;float:left;margin-right:5px;}
 .active{background:#111;padding:6px;display:block;float:left;outline:none;}
 .clear{clear:both;}
 
 div.description{
 position:absolute; /* absolute position (so we can position it where we want)*/
 bottom:0px; /* position will be on bottom */
 width:425px;
 /* styling bellow */
 background-color:black;
 font-family: ahoma;
 font-size:15px;
 color:white;
 opacity:0.6; /* transparency */
 filter:alpha(opacity=60); /* IE transparency */
 }
 
 p.description_content{padding:10px;margin:0px;}

And here is the script part. Palace it inside script tag:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/JavaScript">
$(document).ready(function(){$(#button a).click(function(){var integer=$(this).attr( arel);$(#myslide .cover).animate({left:-425*(parseInt(integer)-1)})
$(#button a).each(function(){$(this).removeClass(active);if($(this).hasClass(utton+integer)){$(this).addClass(active)}});});});
</script>

Check out the DEMO how it comes.

 Original Source:
http://www.webdeveloperjuice.com/2010/01/27/easy-way-to-slide-images-with-overlay-caption-using-css-and-jquery/