Косяк в анимации слайдера
 

Написал слайдер

$.fn.slider = function() {
        var sett = {
            items: 0,
            curr: 1,
            lastCurr: 1,
            t: null,
            init: function(){
                $('.switch .next').click(function(){
                    sett.next();
                });
                $('.switch .prev').click(function(){
                    sett.prev();
                });
                this.items = $('.tape div').length;
                for(var i=0;i<this.items;i++){
                    $('.next').before($('<div/>',{class:'item','data-item':(1+i)}));
                    $('.tape div:nth-child('+(1+i)+')').attr('data-item',(1+i));
                }
                $('.switch .item:nth-child('+(this.curr+1)+')').addClass('curr');
                $('.tape div').removeClass('curr');
                $('.tape div:nth-child('+this.curr+')').addClass('curr');
                $(document).on('click','.switch .item',function(){
                    sett.curr = $(this).data('item');
                    sett.setCurr();
                });
                $('.slider').mouseenter(function(){
                    clearInterval(sett.t);       
                }).mouseleave(function(){
                    sett.setAutoslide();
                });
                this.setAutoslide();
            },
            setCurr: function(i){
                if(typeof(i)==='undefined'){
                    i = this.curr;
                }
                $('.switch .item').removeClass('curr');
                $('.switch .item:nth-child('+(this.curr+1)+')').addClass('curr');
                $('.tape div').removeClass('curr');
                $('.tape div').hide();
                var item = $('.tape div[data-item='+this.curr+']');
                if(this.curr>this.lastCurr){
                    item.show();
                    item.prev().show();
                    item.addClass('curr');
                    item.css({left:741,opacity:0});
                    item.stop().animate({left:0,opacity:1},300);
                    this.lastCurr = this.curr;
                }else{
                    item.show();
                    item.next().show();
                    item.addClass('curr');
                    item.css({right:741,opacity:0});
                    item.stop().animate({right:0,opacity:1},300);
                    this.lastCurr = this.curr;
                }
            },
            next: function(){
                this.curr++;
                if(this.curr>this.items){
                    this.curr = 1;
                }
                this.setCurr();
            },
            prev: function(){
                this.curr--;
                if(this.curr<1){
                    this.curr = this.items;
                }
                this.setCurr();
            },
            setAutoslide: function(){
                this.t = setInterval(function(){
                    sett.next();
                },2500);
            }
        };sett.init();
    };

При перелистывании назад, блоки накладываются друг на друга, а при перелистывании с последнего слайда на первый, во время анимации отображается второй а на него накладывается нужный, а должен быть четвертый последний вместо второго.
Вот html-код:

<div class="slider">
                    <div class="tape">
                        <div style="background: red">slide 1</div>
                        <div style="background: green">slide 2</div>
                        <div style="background: magenta">slide 3</div>
                        <div style="background: blue">slide 4</div>
                    </div>
                    <div class="control">
                        <div class="switch">
                            <div class="prev"></div>
                            <div class="next"></div>
                        </div>
                    </div>
                </div>

Подскажите где я накосячил?

Sanu0074,
сделали бы полноценный макет с css

рони,
вот кусочек SASS

& .slider{
        float: left;
        width: 740px;
        -moz-user-select: -moz-none;
        -o-user-select: none;
        -khtml-user-select: none;
        -webkit-user-select: none;
        user-select: none;
            overflow: hidden;
        & .control{
            position: relative;
            z-index: 100;
            position: absolute;
            width: 100%;
            bottom:6px;
            cursor: default;
            & .switch{
                display: inline-block;
                background: transparent;
                border-bottom: 20px solid $insideBlBg;
                border-left: 15px solid transparent;
                border-right: 15px solid transparent;
                height: 0;
                & div{
                    display: inline-block;
                    background: #000;
                    border-radius: 50%;
                    padding: 5px;
                    margin: 6px 2px 0 2px;
                    cursor: pointer;
                    &.curr{
                        background: #fff;
                    }
                    &.prev{
                        background: url(../img/sprite.png) no-repeat -40px -4px;
                    }
                    &.next{
                        background: url(../img/sprite.png) no-repeat -40px -20px;
                    }
                }
            }
        }
        & .tape{
            position: relative;
            z-index: 10;
            & div{
                text-align: left;
                z-index: 11;
                position: absolute;
                width: 741px;
                height: 234px;
                background-size: 100%;
            }
            & .curr{
                z-index: 15;
            }
        }
    }

Sanu0074,
условие в 42 некорректное убрано добавлен параметр left в нужных местах

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">.slider{float:left;width:740px;height:270px;-moz-user-select:-moz-none;-o-user-select:none;-khtml-user-select:none;-webkit-user-select:none;user-select:none;overflow:hidden}
  .slider .control{position:relative;z-index:100;margin:0 auto;width:100%;top:235px;cursor:default}
  .slider .control .switch{display:inline-block;background:transparent;border-bottom:20px solid #fff;border-left:15px solid transparent;border-right:15px solid transparent;height:0}
  .slider .control .switch div{display:inline-block;background:#000;border-radius:50%;padding:5px;margin:6px 2px 0 2px;cursor:pointer}
  .slider .control .switch div.curr{background:#F30}
  .slider .control .switch div.prev{background:url(../img/sprite.png) no-repeat -40px -4px}
  .slider .control .switch div.next{background:url(../img/sprite.png) no-repeat -40px -20px}
  .slider .tape{position:relative;z-index:10}
  .slider .tape div{text-align:left;z-index:11;position:absolute;width:741px;height:234px;background-size:100%}
  .slider .tape .curr{z-index:15}
  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script> $.fn.slider = function() {
        var sett = {
            items: 0,
            curr: 1,
            lastCurr: 1,
            t: null,
            left : false,
            init: function(){
                $('.switch .next').click(function(){
                    sett.next();
                });
                $('.switch .prev').click(function(){
                    sett.prev();
                });
                this.items = $('.tape div').length;
                for(var i=0;i<this.items;i++){
                    $('.next').before($('<div/>',{'class':'item','data-item':(1+i)}));
                    $('.tape div:nth-child('+(1+i)+')').attr('data-item',(1+i));
                }
                $('.switch .item:nth-child('+(this.curr+1)+')').addClass('curr');
                $('.tape div').not('.tape div[data-item='+this.curr+']').hide();
                $(document).on('click','.switch .item',function(){
                    sett.curr = $(this).data('item');
                    if(sett.curr == sett.lastCurr) return;
                    sett.left = (sett.curr < sett.lastCurr)
                    sett.setCurr();
                });
                $('.slider').mouseenter(function(){
                    clearInterval(sett.t);
                }).mouseleave(function(){
                    sett.setAutoslide();
                });
                this.setAutoslide();
            },
            setCurr: function(i){
                if(typeof(i)==='undefined'){
                    i = this.curr;
                }

                $('.switch .item').removeClass('curr');
                $('.switch .item:nth-child('+(this.curr+1)+')').addClass('curr');
                $('.tape div').removeClass('curr')
                .stop(true,true).not('.tape div[data-item='+this.lastCurr+']').hide();
                var item = $('.tape div[data-item='+this.curr+']');
                    item.show();
                    item.addClass('curr');
                    item.css({left:this.left ? 741 : -741,opacity:0});
                    item.animate({left:0,opacity:1},300);
                    this.lastCurr = this.curr;
            },
            next: function(){
                this.curr++  ;
                if(this.curr > this.items){
                    this.curr = 1;
                }
                this.left = false;
                this.setCurr();
            },
            prev: function(){
                this.curr--;
                if(this.curr<1){
                    this.curr = this.items;
                }
                this.left = true;
                this.setCurr();
            },
            setAutoslide: function(){
                this.t = setInterval(function(){
                    sett.next();
                },2500);
            }
        };sett.init();
    };

     $(function(){
       $(".slider").slider()
});


  </script>
</head>

<body>
<div class="slider">
                    <div class="tape">
                        <div style="background: red">slide 1</div>
                        <div style="background: green">slide 2</div>
                        <div style="background: magenta">slide 3</div>
                        <div style="background: blue">slide 4</div>
                    </div>
                    <div class="control">
                        <div class="switch">
                            <div class="prev">prev</div>
                            <div class="next">next</div>
                        </div>
                    </div>
                </div>
</body>
</html>