Простой слайдер картинок TinySlider 2

Cлайдер картинок, настолько простой, что JavaScript весит всего 3 килобайта!

Простой слайдер картинок TinySlider 2

Несмотря на 3kb JS кода слайдер умеет автоматически перелистывать слайды, два вида навигации - стрелочками влево и вправо и навигацию ввиде квадратиков, а так же небольшой эффект анимации слайдов

html код

<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="script.js"></script>
<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>

Настройки слайдера преимущественно касаются удобству интеграции слайдера в сайт, можно менять id классы стилей для разных элементов, а так же время между переходами в секундах, можно назначить какой слайд первым будет показан, горизонтально или вертикально будут меняться слайды.