//  
    // id 
    function Slider (id) {
        this.create(id)
    };
    //
    Slider.prototype = {
        create: function (id) {
            this.container = document.getElementById(id);
            this.list = document.getElementById("list");
            this.buttons = document.getElementById("buttons").getElementsByTagName("span");
            this.prev = document.getElementById("prev");
            this.next = document.getElementById("next");
            this.index = 1;   //
            this.swapPageTime = 2000
            this.timer=null;
        },
        animate: function (offset,animateDuration) {
            //style.leftstyle.left
            //style.leftparseInt()
            this.list.style.transition = `left ${animateDuration} linear`;//
            var newLeft = parseInt(this.list.style.left) + offset;
            this.list.style.left = newLeft + "px";  //
        },
    };
    var slider = new Slider("container");
    setTimeout(function () {
        slider.animate(-300,"1s")
    },0)  //
    //    slider.animate(-300,"1s") 
    
    



animatelistleft,transition