How can i auto rotate this carousel


Tags: jquery,html,css,carousel

Problem :

How can I auto rotate this carousel?

I am following this carousel tutorial but I don't know how to auto rotate it.

jQuery:

var items,length,deg,z,move = 0;

function rotate(direction)
{
    move += direction;

    for(var i = 0; i < 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 < length; i++)
    {
        items[i].style.transform = "rotateY("+(deg*i)+"deg) translateZ("+z+"px)";
    }
}

  window.addEventListener('load', load); 

css:

*
{
    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;
}

html:

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

        <button onclick="rotate(1)">Rotate</button>
        <script src="carousel.js"></script>
    </body>
</html>


Solution :

Use SetInterval

setInterval(function(){ rotate(1); }, 3000);

Set Interval manual

if you make your js file like this, it should auto rotate and also if you click the button, the carousel will rotate too.

var items,length,deg,z,move = 0;

function rotate(direction)
{
    move += direction;

    for(var i = 0; i < 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 < length; i++)
    {
        items[i].style.transform = "rotateY("+(deg*i)+"deg) translateZ("+z+"px)";
    }

    setInterval(function(){ rotate(1); }, 10000); //auto rotate every 10 seconds(10,000 miliseconds)
}

window.addEventListener('load', load); 

    CSS Howto..

    CSS: how to make scrollbar appear outside div's border?

    How to center the Nav-Bar

    How to compile less css files using brunch

    How do I make the cursor stay as a pointer on text using jquery/javascript?

    CSS/Javascript: How to make rotating circular menu with multiple states?

    How to move this structure to the right without using float?

    How to evenly distribute menu items with CSS when width and quantity is not known?

    Japanese Text not showing correctly

    How to override CSS style for a specific element if its parent has a specific class

    How do you transition a height without the element going outside the parents border?

    How to separate settings and css in a less?

    Captions after 1st slide doesnt show for flexslider

    How to center images in div

    Why does this menu render poorly in Firefox 3.5 and IE7? How do I adapt?

    Show s horizontally in a div
    table { display: inline-block; } This should work just fine for you....
    Read more

    how can I create overlay div to fit the rest of the screen

    How do you create a link out of circular text with JavaScript and CSS?

    Twitter widget covers up another div that might appear over it . How to make twitter widget appear under?

    In CSS/JS, how to word-wrap at every nth word?

    How to make submenus drop down below parent menu, instead of flying out?

    How to perfectly center contents in an unordered list?

    Greasemonkey how to apply a CSS rule only for @media print?

    How to clip canvas with CSS clip-path?

    how to load css rules using javascript?

    How to add a box shadow to a table tr element upon hover? [duplicate]

    How to align a div to lower left corner in css

    How to set width correctly in CSS - Need to fix bug with Safari on Mac and on iPad

    Parsley.js 2.0 How to use the provided css file

    How to move image slowly with animation when appending the image to

    tag
    The problem is with your .position() and perhaps your logic because newEle.position() always returns {top: 0, left: 0} ofcourse because you haven't changed it. Use this replacement of the function...
    Read more

    How to css 3rd li in hierarchy?