carousel_fade..........

.carousel{
    width: 100%;
    position: relative;
    height: 420px;
    clear: both;
    float: left;
    .carousel-icons{
        display: none;
    }
    .carousel-list{
        width: 100%;
        height: 420px;
        clear: both;
        float: left;
        li{
            position: absolute;
            height: 420px;
            width: 100%;
            left: 0;
            top: 0;
            a{
                display: block;
                width: 100%;
                height: 100%;
                position: absolute;
                left:0;
                top:0;
                img{
                    width: 100%;
                    height: 420px;
                    position: absolute;
                    left:0;
                    top:0;
                }
            }
        }
    }
    .direction{

        border-radius: 50%;
        position: absolute;
        top: 50%;
        margin-top: -15px;
        text-align: center;
        line-height: 30px;
        color: #5f6571;
        z-index: 10;
        font-size: 30px;
        cursor:pointer;
        z-index: 30;
    }
    .next-btn{
    right:30px;
    }
    .prev-btn{
        left: 30px;
    }
    .item{
        position: absolute;
        bottom: 20px;
        left: 50%;
        text-align: center;
        float: left;
        z-index: 30;
        li{
            width: 40px;
            height: 4px;
            background: #000;
            opacity: 0.2;
            float: left;
            margin: 0 5px;
            cursor:pointer;
            border: 1px solid #ccc;
        }
        .active{
            background: #039be5;
            box-shadow: 0 0 5px rgba(255,255,255,0.5); 
            opacity: 1;
            position: relative;
        }
    }
}

<div class="carousel carousel-content" id="carousel"></div>

[
  {
    "img":"./assets/images/slider/1.jpg",
    "url":"1"
  },
  {
    "img":"./assets/images/slider/2.jpeg",
    "url":"2"
  },
  {
    "img":"./assets/images/slider/3.jpeg",
    "url":"3"
  }
]

<script  type="text/x-handlebars-template" id="carousel-template">
<ul class="carousel-list">
    {{#each this}}
    <li>
        <a href="{{this.url}}">
            <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="{{this.img}}" alt="">
        </a>
    </li>
    {{/each}}
</ul>
    <div class="carousel-icons">
        <span class="direction next-btn icon-chevron-with-circle-right" id="next-btn"></span>
        <span class="direction prev-btn icon-chevron-with-circle-left" id="prev-btn"></span>
        <ul class="item">
            <li class="active"></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</script>

(function () {
        $.ajax({
            url: "./assets/data/Carsoule/carsoule.json",
            type: "get",
            beforeSend: function() {
                $(".carousel-loading").show();
            },
            success: function(data) {
                $(".carousel-loading").hide();
                var temp = $("#carousel-template").html();
                var setTemp = Handlebars.compile(temp);
                var getData = setTemp(data);
                $(".carousel-content").html(getData);
                fade.init("#carousel",{
                    time:6000,
                    i:0,
                    fading:false,
                    action:600
                });
            },
            complete: function() {
                $(".carousel-icons").show();
            }
        });
})();

var fade=(function () {
    function Carsoule(el,options) {
        this.$el=$(el);
        this.$opts=options;
        this.$list=this.$el.find(".carousel-list");
        this.$next=this.$el.find("#next-btn");
        this.$prev=this.$el.find("#prev-btn");
        this.$item=this.$el.find(".carousel-icons .item");
        this.$timer=null;
    }

    var defualts={
        time:3000,
        i:0,
        fading:false,
        action:1000
    };

    Carsoule.prototype.init=function () {
        this.settingDisplay();
        this.nextBtn();
        this.prevBtn();
        this.changeItem();
        this.settingTimer(this);
    };

    Carsoule.prototype.nextBtn=function () {
        var self=this;
        this.$next.on("click",function () {
            if(self.$opts.fading) {
                return;
            }else{
                self.$opts.fading=true;
            }
            self.timerFn(self);
        });
    };

    Carsoule.prototype.prevBtn=function () {
        var self=this;
        this.$prev.on("click",function () {
            if(self.$opts.fading) {
                return;
            }else{
                self.$opts.fading=true;
            }
            if(self.$opts.i<=0){
                self.$opts.i=self.$list.find("li").length-1;
            }else{
                self.$opts.i--;
            }
            self.display(self,self.$opts.i);
        })
    };

    Carsoule.prototype.changeItem=function () {
        var self=this;
        this.$item.find("li").on("mouseover",function () {
            var index=$(this).index();
            self.$opts.i=index;
            self.display(self,self.$opts.i);
        })
    };

    Carsoule.prototype.settingDisplay=function () {
        this.$list.find("li").eq(0).css({"opacity":"1","z-index":"20"}).siblings("li").css({"opacity":"0","z-index":"0"})
    };

    Carsoule.prototype.display=function ($self,$index) {
        $self.$list.find("li").eq($index).animate({
            "opacity":1,
            "z-index":"10"
        },$self.$opts.action,function () {
            $self.$opts.fading=false;
        }).siblings("li").animate({
            "opacity":0,
            "z-index":"0"
        },$self.$opts.action);
        $self.$item.find("li").eq($index).addClass("active").siblings().removeClass("active");
    };

    var init=function (el,options) {
        var opt=$.extend({},defualts,options);
        new Carsoule(el,options).init();
    };

    Carsoule.prototype.timerFn=function (self) {
        if(self.$opts.i>=self.$list.find("li").length-1){
            self.$opts.i=0;
        }else{
            self.$opts.i++;
        }
        self.display(self,self.$opts.i);
    };

    Carsoule.prototype.settingTimer=function(){
        var self=this;
        clearInterval(this.$timer);
        this.$timer=setInterval(function () {
            self.timerFn(self);
        },self.$opts.time);
    }

    return{
        init:init
    }

})();