Choco slider - плагин слайдшоу
Плагин слайдшоу. Особенности: легкость, гибкость, настраиваемость, совместимость с firefox 2+, IE6+, Safari v4, Google Chrome 3+ и Opera 9+.
Подключить в шапке файлы:
<link rel="stylesheet" href="chocoslider.css" />
<script type="text/jаvascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/jаvascript" src="jquery.chocoslider.min.js"></script>
HTML
<div id="contenido">
<div id="slider" style="position: relative; width: 500px; height: 220px;">
<img src="img/1.jpg" alt="" title=""/>
<img src="img/2.jpg" alt="" title=""/>
<img src="img/3.jpg" alt="" title=""/>
<img src="img/4.jpg" alt="" title=""/>
<img src="img/5.jpg" alt="" title=""/>
</div>
</div>
JS
$(window).load(function() {
$('#slider').chocoslider();
});
Опции
- auto:true, (авто слайдшоу)
- autoPause:true, (остановка слайдера после клика)
- speedStrip:500, (скорость между полосами)
- effect:'random', (Три типа: effect1, effect2 и случайный)
- numberStrips:15, (количество показываемых полос)
- sliderDelay:3000, (время задержки между слайдами)
- transparencytitle:0.8, (прозрачность заголовков)
- bChange: function(){}, (функции необходимые для завершения)
- aChange: function(){}, (функции необходимые для завершения)
- chocoEnd: function(){}, (функции необходимые для завершения)
- controlNavigation:true (удаление навигационных кнопок)
Например:
$(window).load(function() {
$('#slider').chocoslider({
auto:true,
autoPause:false,
speedStrip:500,
effect:'random',
numberStrips:15,
sliderDelay:6000,
transparencytitle:1.0,
bChange: function(){},
aChange: function(){},
chocoEnd: function(){},
controlNavigation:true
});
});
Ссылки