Automatic Image Slider w/ CSS & jQuery

 

jQuery sliders  (css, and javascript)

Comfortable  All browser.

Automatic Image Slider w/ CSS & jQuery

Most likely Banner slider jquery programs you will need for your work. ... slider images and jquery slider range in minutes just by some clicks...css knowledge ... Download JavaScript Slider Image Gallery...Html

javascript and Css
<style type="text/css" media="screen">
#slider {
    width: 410px; /* important to be same as image width */
    height: 300px; /* important to be same as image height */
    position: relative; /* important */
    overflow: hidden; /* important */
}
#sliderContent {
    width: 410px; /* important to be same as image width or wider */
    position: absolute;
    top: 0;
    margin-left: 0;
}
.sliderImage {
    float: left;
    position: relative;
    display: none;
}
.sliderImage span {
    position: absolute;
    font: 10px/15px Arial, Helvetica, sans-serif;
    padding: 10px 13px;
    width: 384px;
    background-color: #000;
    filter: alpha(opacity=70);
    -moz-opacity: 0.7;
    -khtml-opacity: 0.7;
    opacity: 0.7;
    color: #fff;
    display: none;
}
.clear {
    clear: both;
}
.sliderImage span strong {
    font-size: 14px;
}
.top {
    top: 0;
    left: 0;
}
.bottom {
    bottom: 0;
    left: 0;
}
ul { list-style-type: none;}
</style>
<!-- JavaScripts-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="s3Slider.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#slider').s3Slider({
            timeOut: 3000
        });
    });
</script>

html Code

<h2>Example 1</h2>
    <p>This show the layer appears from top or bottom.</p>
    <div id="slider">
        <ul id="sliderContent">
            <li class="sliderImage">
                <a href="http://it-solution.in"><img src="example_images/410/1.jpg" alt="1" /></a>
                <span class="top"><strong>Title text 1</strong><br />Content text...</span>
            </li>
            <li class="sliderImage">
                <a href="http://it-solution.in"><img src="example_images/410/2.jpg" alt="2" /></a>
                <span class="top"><strong>Title text 2</strong><br />Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...</span>
            </li>
            <li class="sliderImage">
                <img src="example_images/410/3.jpg" alt="3" />
                <span class="bottom"><strong>Title text 2</strong><br />Content text...</span>
            </li>
            <li class="sliderImage">
                <img src="example_images/410/4.jpg" alt="4" />
                <span class="bottom"><strong>Title text 2</strong><br />Content text...</span>
            </li>
            <li class="sliderImage">
                <img src="example_images/410/5.jpg" alt="5" />
                <span class="top"><strong>Title text 2</strong><br />Content text...</span>
            </li>
            <div class="clear sliderImage"></div>
        </ul>
    </div>
   1. <a href="Example 2.html">Example 2 </a>
   2. <a href="Example 3.html">Example 3 </a>



See Demo