Здравствуйте, использую данный слайдер
Slitslider. Всем устраивает, настроил как надо, но встал вопрос об анимации изображений, то есть фоновое изображение плавно переходит к другому (как карусель). В слайдере это реализовано не совсем как мне бы хотелось. Можете подсказать в каком направлении двигаться?
<script>
$(function() {
var Page = (function() {
var $navArrows = $( '#nav-arrows' ),
$nav = $( '#nav-dots > span' ),
slitslider = $( '#slider' ).slitslider(
{
onBeforeChange : function( slide, pos ) {
$nav.removeClass( 'nav-dot-current' );
$nav.eq( pos ).addClass( 'nav-dot-current' );
}
} ),
init = function() {
initEvents();
},
initEvents = function() {
// add navigation events
$navArrows.children( ':last' ).on( 'click', function() {
slitslider.next();
this.isAnimating = true;
return false;
} );
$navArrows.children( ':first' ).on( 'click', function() {
slitslider.previous();
this.isAnimating = true;
return false;
} );
$nav.each( function( i ) {
$( this ).on( 'click', function( event ) {
var $dot = $( this );
if( !slitslider.isActive() ) {
$nav.removeClass( 'nav-dot-current' );
$dot.addClass( 'nav-dot-current' );
}
slitslider.jump( i + 1 );
return false;
} );
} );
};
return { init : init };
})();
Page.init();
});
</script>
