Слайдер TinySlider 2

29.01.13 25.01.15 Нет 9346

Полнофукциональный слайдер легко конфигурируется и внешний вид также легко настраивается через CSS. Весит всего 3 KB (tiny – крошечный).

Возможности:
- автоматическая ротация с опцией автоповтора
- подсветка активного пункта навигации (в виде квадратиков; если включена)
- навигация стрелками
- возможность выбора направления сдвига картинок: вертикальное или горизонтальное

Эта версия отличается более гладким движением, элластичное "двойное действие" – настраиваемый эффект перехода картинкой своего места и возврата назад, непрерывное скольжение без перемотки, и несколько других исправлений / настроек.

Возможна вставка любого контента. При отключенном JavaScript сохраняет изящный, хоть и неактивный, вид.

Пример использования:

Между <head></head>:

<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="script.js"></script>

Между <body></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, // false для отключения анимации или число секунд между сменой слайдов 
resume:false, // продолжение автослайдирования после приостановки
vertical:false, //вертикальное слайдирование
navid:'pagination', // Id UL нумерации страниц
activeclass:'current', // активный класс нумерации страниц
position:0, //индекс начальной позиции
rewind:false, //выключает автоперемотку, если true – то автослайдирование
elastic:true, // переключение эффекта "дрожания"  слайдов (проход своего места и возврат на место)
left:'slideleft', // ID левой навигационной стрелки, для отмены выбора курсором
right:'slideright' // ID правой навигационной стрелки, для отмены выбора курсором
});
 </script>

Источник

Смотреть пример

Скачать исходник Размер: 222,96kB | Изменен: 29.01.13 | Загрузок: 466