здравствуйте. делаю слайдер с помощью плагина ui slider
подскажите, пожалуйста, как сделать, чтобы картинки плавно появлялись при прокручивании скролла. также нужно, чтобы текстовая информация менялась при прокручивании скролла. адрес слайдера
http://vash-sayt.ru/dbr/
$(function() {
var slider = $('#slider');
slider.slider({
'animate': "slow",
'min': 0,
'max': 6,
slide: function( event, ui ) {
var index = ui.value;
$('#tree').attr('src', 'images/slider/'+(index+1)+'.png');
$('#tree2').attr('src', 'images/slider/tum/'+(index+1)+'.png');
$('#tree2').attr('class', 't'+(index+1));
$('#tree3').attr('class', 'd'+(index+1));
}
});
$('.trees').click(function(){
slider.slider('value', slider.slider('value') + 1);
return false;
});
$('.trees2').click(function(){
slider.slider('value', slider.slider('value') + 1);
return false;
});
$('.trees3').click(function(){
slider.slider('value', slider.slider('value') + 1);
return false;
});
});
<div class="trees2">
<img class="t1" id="tree2" src="images/slider/tum/1.png" alt="" />
<img class="t1" src="images/slider/tum/1.png" style="display: none;" />
<img class="t2" src="images/slider/tum/2.png" style="display: none;"/>
<img class="t3" src="images/slider/tum/3.png" style="display: none;"/>
<img class="t4" src="images/slider/tum/4.png" style="display: none;"/>
<img class="t5" src="images/slider/tum/5.png" style="display: none;"/>
<img class="t6" src="images/slider/tum/6.png" style="display: none;"/>
<img class="t7" src="images/slider/tum/7.png" style="display: none;"/>
</div>
<div id="slider"></div>
<div class="trees3">
<p class="d1" id="tree3">1 сентября</p>
<p class="d1">1 сентября</p>
<p class="d2">6 ноября</p>
<p class="d3">9 декабря</p>
<p class="d4">11 января</p>
<p class="d5">4 февраля</p>
<p class="d6">23 октября</p>
<p class="d7">21 марта</p>
</div>
