crear slider con css

Codigo HTML
Lo único que tenemos que tener en cuenta en este caso es que debemos crear tantos divs como imágenes querramos mostrar.
1.
2.
3.
4.
5.
6.
7.
8.
9. →
10. ←11.

Javascript
En este código ingresamos los parámetros que necesitemos. En nuestro ejemplo ingresamos el tipo de animacion, la duracion del intervalo, si tiene imágenes, y el elemento que locontiene.
$(document).ready(function(){
 
$(".slider").jSlider({elem:"div",images:true, animation: "random",auto_slide: true, auto_slide_interval:4000, infinite: true, speed: 1200});
});
 
CSSIngresamos el código css para acomodar el Slider.
.slider {
width:600px;
height:350px;
margin:50px auto;
position:relative;
}
a.next, a.prev {
color:#000;
background-color:#eee;border:1px solid #fff;
outline:1px solid #ccc;
text-shadow:-1px -1px 0px #fff;
text-decoration:none; z-index:99;
padding:0px 5px; display:block;
}
.next {
position:absolute;
right:-10px;top:50%;
}
.prev {
position:absolute;
left:-10px;
top:50%;
}
a.inactive {
color:#ccc;
background-color:#fff;
border:1px solid #eee;
outline:none;
}
/* ul.navi is the generatednavigational bullets we generate, you can disable this */
ul.navi {
list-style:none;
position:absolute;
bottom:10px;
right:5px;
}
ul.navi li {
float:left;
margin-right:5px;
}
ul.navi li a {background-color:#CCC;
display:block;
height:10px;
width:10px;
text-indent:-9999px;
outline:none;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0px 0px 2px #000000;-moz-box-shadow: 0px 0px 3px #000000;
box-shadow: 0px 0px 1px #000000;
}
ul.navi li a.active {
background-color:#fff;
}
Parámetros
Estos son los parámetros que podemos configurar paranuestro Slider:
previous_class = la clase del elemento que navega al item anterior
next_class = la clase que navega al próximo item / slide
inactive = la clase que será seteada a la navegación...