Как реализовать переключение "назад - вперед"?
Всем доброго времени суток!
Решил написать слайдер под свои нужды (к сожалению, не нашел готового).
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");
});
Источник: Stack Overflow на русском