How can i auto rotate this carousel
<p>How can I auto rotate this carousel?</p>

<p>I am following <a href="http://i.stack.imgur.com/HJcdp.png" rel="nofollow">this carousel tutorial</a> but I don't know how to auto rotate it.</p>

<p><strong>jQuery:</strong></p>

<pre><code>var items,length,deg,z,move = 0;

function rotate(direction)
{
    move += direction;

    for(var i = 0; i &lt; length; i++)
    {
        items[i].style.transform = "rotateY("+(deg*(i+move))+"deg) translateZ("+z+"px)";
    }
}

function load()
{
    items = document.getElementsByClassName('item');
    length = items.length;

    deg = 360 / length;
    z = (items[0].offsetWidth / 2) / Math.tan((deg / 2) * (Math.PI / 180));

    for(var i = 0; i &lt; length; i++)
    {
        items[i].style.transform = "rotateY("+(deg*i)+"deg) translateZ("+z+"px)";
    }
}

  window.addEventListener('load', load); 
</code></pre>

<p><strong>css:</strong></p>

<pre><code>*
{
    box-sizing:border-box;
}
html ,body
{
    margin:0;
    padding:0;
    height:100%;
}
.carousel
{
    width:400px;
    height:200px;
    position:relative;
    top:50%;
    left:50%;
    transform:translateX(-50%) translateY(-50%);

    perspective:1000px;
    transform-style: preserve-3d;

}
.carousel .item
{
    width:100%;
    height:100%;
    position:absolute;

    border: 1px solid black;

    transition:transform 1s;
}
</code></pre>

<p><strong>html:</strong></p>

<pre><code>&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;Practice&lt;/title&gt;
        &lt;meta charset="UTF-8"&gt;
        &lt;link rel="stylesheet" type="text/css" href="css.css"&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;div class="carousel"&gt;
            &lt;div class="item"&gt;&lt;img src="image/logo.jpg" style="height:199px; width:398px;"&gt;&lt;/div&gt;
            &lt;div class="item"&gt;&lt;img src="image/slide1.jpg" style="height:199px; width:398px;"&gt;&lt;/div&gt;
            &lt;div class="item"&gt;&lt;img src="image/slide2.jpg" style="height:199px; width:398px;"&gt;&lt;/div&gt;
            &lt;div class="item"&gt;&lt;img src="image/slide3.jpg" style="height:199px; width:398px;"&gt;&lt;/div&gt;
        &lt;/div&gt;

        &lt;button onclick="rotate(1)"&gt;Rotate&lt;/button&gt;
        &lt;script src="carousel.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
&lt;/html&gt;
</code></pre>