Animate Slider

Как это работает?

Плагин Animate Slider использует некоторые предопределенные в JQuery классы анимации (FadeIn, FadeOut, rotateIn, отскок, slideInRight и другие) находятся в jquey.animateSlider.css и добавляет их к каждому элементу слайдера. Также в слайдер можно добавлять классы с задержкой для каждой анимации (delay1s, delay1-5s, delay2s т.д.).

Быстрый старт.

<!-- Подключаем файл стилей -->

<link rel="stylesheet" href="css/jquery.animateSlider.css">
<ul class="anim-slider">
<li class="anim-slide">
<!-- Размещаем здесь контент -->
</li>
<li class="anim-slide">
<!-- Размещаем здесь контент -->
</li>
<!-- Стрелки -->
<nav class="anim-arrows">
<span class="anim-arrows-prev">
<i class="fa fa-angle-left fa-3x"></i>
</span>
<span class="anim-arrows-next">
<i class="fa fa-angle-right fa-3x"></i>
</span>
</nav>
<!-- динамически создаваемые маркеры -->
</ul>
<script src="js/jquery.js"></script>
<script src="js/modernizr.js"></script>
<!-- Подключает плагин -->
<script src="js/jquery.animateSlider.js"></script>
<script>
$(function()
{
$(".anim-slider").animateSlider();
});
</script>

Настройки

$(".anim-slider").animateSlider( 
{ autoplay : true, //Автосмена слайдов
interval : 5000, //Интервал смены слайдов
animations : //Способы анимации для каждого слайда
{0 : //Слайд № 1
{tagName : //класс или ID для элементов слайда
{show : "fadeIn", //тип анимации слайда при появлении
hide : "fadeOut", //тип анимации слайда при исчезновении
delayShow : "delay1s" //Задержка слайда},
"#id" : { show : "bounceIn",
hide : "bounceOut",
delayShow : "delay1-5s"},
".class":{
show : "rotateIn",
hide : "rotateOut",
delayShow : "delay2s"}
},
1 : //Slide No2
{"#id" :{
show : "bounceInDown",
hide : "bounceOutUp",
delayShow : "delay0-5s"},
tagName :{show : "slideInLeft",
hide : "slideOutRight",
delayShow : "delay1s"},
}
}
} );

Посмотреть пример

Оставить заявку

Как связаться?

Тел: +7-910-223-20-27
Email: info@groupbw.ru
skype: litvinov.d1