Блог

Я создаю слайдер jQuery для этого конкретного проекта, над которым я работаю. Проблема, с которой я сталкиваюсь, заключается в том, что мой код не анимируется во время процесса слайда. Что он должен делать, так это то, что в зависимости от стороны переключения (влево или вправо) он должен идти 100% вправо -100%. Он анимируется именно так, как я этого хочу, но он не «выходит» так, как должен. вот его живая версия. dev.designsbycamaron.net

Код Jquery.

 $('section#tf-ipad-info .listofimages .slide:first').addClass('activeslide').appendTo('#tf-ipad-info .mid ul li.mid-image');
        $('section#tf-ipad-info .left-click').click(function(){
            $('.activeslide').removeClass('activeslide').animate({right : " =100%"}, { complete: function(){
                $('section#tf-ipad-info .listofimages .slide:first').addClass('activeslide').appendTo('#tf-ipad-info .mid ul li.mid-image').css({right : "-100%"});
                    $('section#tf-ipad-info .activeslide').animate({right : "0"} , {complete: function(){

                        }
                    })
                }
            });
            $('section#tf-ipad-info .mid-image .slide:first').appendTo('section#tf-ipad-info .listofimages').removeClass('activeslide').removeAttr('style');
        });
        $('section#tf-ipad-info .right-click').click(function(){
            $('.activeslide').animate({right : "-=100%"}, { complete: function(){
                $('section#tf-ipad-info .listofimages .slide:first').addClass('activeslide').appendTo('#tf-ipad-info .mid ul li.mid-image').css({right : " 100%"});
                    $('section#tf-ipad-info .activeslide').animate({right : "0"} , {complete: function(){

                        }
                    })
                }
            });
            $('section#tf-ipad-info .mid-image .slide:first').appendTo('section#tf-ipad-info .listofimages').removeClass('activeslide').removeAttr('style');
        });
  

HTML-КОД

 <ul class="tbl rotater-img-main-content t-align-center">

                                <li class="tbl-cell left-click">
                                    <img src="images/left-arrow-clicker.png" alt="arrow"/>
                                </li>
                                <li class="tbl-cell mid-image ">

                                </li>
                                <li class="tbl-cell right-click">
                                    <img src="images/right-arrow-clicker.png" alt="arrow"/>
                                </li>
                            </ul>