TinySlider 2, es un slider hecho bajo el puro JavaScript, fácil de configurar y modificar con solo el CSS, al no usar otra librería (Ajax, jQuery, Mootoos, etc.) carga más rápido y como pesa menos de 3kb carga muy rápido.
Su uso también es sencillo solo se necesita llamar al .js en el head :
<script type="text/javascript" src="script.js"></script>
Entre sus opciones de uso tenemos las siguiente:
var slideshow=new TINY.slider.slide('slideshow',{
id:'slider',
auto:4, // Segundos entre slides
resume:false, // Continuar el autoslide después de parar
vertical:false, // Dirección del Slide
navid:'pagination', // ID de la pagínacion en el UL
activeclass:'current', // clase para el slide activo
position:0, // Posicion inicial
rewind:false, // vuelve a cargar el slide al terminar
elastic:true, // efecto elastic
left:'slideleft', // ID del nav,
right:'slideright' // ID del nav,
});
En conclusión el código básico debería quedar así:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TinySlider - JavaScript Slideshow</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="wrapper">
<div id="container">
<div class="sliderbutton" id="slideleft" onclick="slideshow.move(-1)"></div>
<div id="slider">
<ul>
<li><img src="photos/1.jpg" width="558" height="235" alt="Image One" /></li>
<li><img src="photos/2.jpg" width="558" height="235" alt="Image Two" /></li>
<li><img src="photos/3.jpg" width="558" height="235" alt="Image Three" /></li>
<li><img src="photos/4.jpg" width="558" height="235" alt="Image Four" /></li>
</ul>
</div>
<div class="sliderbutton" id="slideright" onclick="slideshow.move(1)"></div>
<ul id="pagination" class="pagination">
<li onclick="slideshow.pos(0)"></li>
<li onclick="slideshow.pos(1)"></li>
<li onclick="slideshow.pos(2)"></li>
<li onclick="slideshow.pos(3)"></li>
</ul>
</div>
</div>
<script type="text/javascript">
var slideshow=new TINY.slider.slide('slideshow',{
id:'slider',
auto:4,
resume:false,
vertical:false,
navid:'pagination',
activeclass:'current',
position:0,
rewind:false,
elastic:true,
left:'slideleft',
right:'slideright'
});
</script>
</body>
</html>
Link y Descarga | JavaScript Slider – TinySlider 2
