xSlider.js---automatic slider plugin with jQuery

xSlider.js is a tiny jquuery slide plugin which is simple and quick and friendly apply to ie8.

GitHub here

Step1:
link jquery and xSlider.js

        <script src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/xSlider.js"></script>

And css file

<link rel="stylesheet" href="css/main.css">

Step2:

html

HTML should be in the div named slider>slider-img>slider-img-ul>li...
In the demo,it has five images, so here the list items should be two more :before first one and last one to expend the images gallery.

css

css

CSS main styling code:

.slider {

    width: 1200px;

    margin: 50px auto;

    position: relative;

}

.slider:hover .slider-btn {

    color: #fff;

    text-shadow: 0 0 5px #666;

}

.slider .slider-img {

    width: 12000px;

    position: relative;

}

.slider .slider-img .slider-img-ul {

    position: absolute;

    left: 0;

    top: 0;

    overflow: hidden;

}

.slider .slider-img .slider-img-ul li {

    float: left;

}

.slider .slider-img .slider-img-ul li img {

    width: 1200px;

    height: 460px;

}

.slider .slider-dot ul {

    position: absolute;

    right: 50px;

    bottom: 30px;

}

.slider .slider-dot ul li {

    cursor: pointer;

    width: 10px;

    height: 10px;

    border-radius: 50%;

    background: #ccc;

    border: 2px solid #fff;

    float: left;

    margin-left: 10px;

}

.slider .slider-dot ul li.active, .slider .slider-dot ul li:hover {

    background: #fff;

}

.slider .slider-btn {

    position: absolute;

    width: 50px;

    height: 100px;

    top: 50%;

    line-height: 100px;

    text-align: center;

    color: #fff;

    font-size: 28px;

    text-decoration: none;

    font-family: '黑体';

    color: rgba(255, 255, 255, 0);

}

.slider .slider-btn:hover {

    background: rgba(125, 125, 125, .3);

}

.slider .slider-btn.slider-btn-left {

    left: 0;

    margin-top: -50px;

}

.slider .slider-btn.slider-btn-right {

    right: 0;

    margin-top: -50px;

}  

Change the images and slider size at above position. The main.css can be download here

Step3:

js

Change parmeters in xSlider.js.

$('.slider').xSlider({

  // slider width

  w: 1200,

  // current slide

  current: 0,

  // animation speed

  speed: 500,

  // autoplay interval

  intervalTime: 5000

})