Слайд отключается от экрана с помощью jQuery + добавлены стрелки навигации

Может ли кто-нибудь помочь с добавлением навигационных стрелок к fragmentу кода, найденному здесь

Слайд div с экрана с помощью jQuery и первый ответ, данный …. http://jsfiddle.net/jtbowden/ykbgT/2/

Я хочу иметь возможность добавлять стрелки направления или предыдущие / следующие ссылки

Код ниже

HTML:

Div #1
Div #2
Div #3
Div #4
Div #5

CSS:

 body { padding: 0px; } #container { position: absolute; margin: 0px; padding: 0px; width: 100%; height: 100%; overflow: hidden; } .box { position: absolute; width: 50%; height: 300px; line-height: 300px; font-size: 50px; text-align: center; border: 2px solid black; left: 150%; top: 100px; margin-left: -25%; } #box1 { background-color: green; left: 50%; } #box2 { background-color: yellow; } #box3 { background-color: red; } #box4 { background-color: orange; } #box5 { background-color: blue; } 

JavaScript:

 $('.box').click(function() { $(this).animate({ left: '-50%' }, 500, function() { $(this).css('left', '150%'); $(this).appendTo('#container'); }); $(this).next().animate({ left: '50%' }, 500); }); 

Он работает блестяще, но навигация в одном направлении и активируется щелчком по ящикам

заранее спасибо

AOR

    Должно быть легко сделать 🙂

    создать элемент оболочки «управление навигацией»:

     var $controller = $('
    );

    добавьте 2 основных элемента, чтобы действовать как кнопки перемещения влево и вправо:

     var $left = $('').appendTo($controller), $right = = $('').appendTo($controller); 

    добавьте обработчик событий для каждого элемента перемещения для каждой анимации:

     $left.click(function(event) { ////MOVE THE NAV LEFT }; $right.click(function(event) { ////MOVE THE NAV RIGHT }; 

    замените комментарии вызовами функций для перемещения навигатора (у вас уже есть логика, чтобы переместить его;))

    ПРИМЕЧАНИЕ. Убедитесь, что вы добавили « курсор: указатель » к элементам CSS элемента кнопки, чтобы они отображались для пользователя кликабельными.

    Если кто-то заинтересован здесь, это более подробный ответ на аналогичный вопрос, который отлично работает! jQuery анимировать divs on / off screen последовательно со стрелками навигации