Как реализовать переключение "назад - вперед"?

Рейтинг: 1Ответов: 0Опубликовано: 08.09.2014

Всем доброго времени суток!

Решил написать слайдер под свои нужды (к сожалению, не нашел готового).

var active = $("#slide .slide.active");
var next;
function Slider(active){
 // анимация отображения слайда
next = $(active).next('.slide'); // + переход к первому элементу, если дошли до конца
Slider(next); // и повторится все опять

}

Слайдер работает нормально, но вот реализовать переключение "назад - вперед" не получается.

При клике "назад - вперед" я опять определяю следующий/предыдущий элемент, вызываю функцию Slider(next/prev), но слайды начинают наслаиваться =(

Можно ли как-то остановить выполнение текущей анимации слайда (он же, зараза, в рекурсии)?
Т.е. как-то выгрузить из памяти функцию или что-то в этом роде?

function ShowSlide(active){
    $(img).animate({
            marginRight: "10%" // появление картинки
        }, 1000).delay(1000).animate({ // показывает секунду,потом затухание картинки
            opacity: 0.5 
        }, 1000).animate({
            opacity: 0
        }, 1000, function() {

            $(img).css("margin-right", "-80%"); // переносим слайд на границы видимости
            $(img).css("opacity", "1");
        })

        $(text).animate({
            marginLeft: "10%" // тоже самое
        }, 1000).delay(1000).animate({
            opacity: 0.5
        }, 1000, function() { 
            ShowSlide(next); // когда текущий слайд на половину стал прозрачным,начинаю отображение следующего 
        }).animate({
            opacity: 0
        }, 1000, function() {
            $(text).css("margin-left", "-80%");
            $(text).css("opacity", "1");

        });

Ответы

Ответов пока нет.