2 119 Скрипты / Slider

Choco slider - плагин слайдшоу

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
    });
});
Скачать 655Загрузок 107,17 Kb
Демо

Комментарии

  • Facebook
  • Вконтакте

Похожие статьи