Why impress.js does not rotate

StackOverflow https://stackoverflow.com/questions/19088192

  •  29-06-2022
  •  | 
  •  

Question

I am messing a around with impress.js a little. I wanted 4 slides and wanted to make it to look like there is a square in the middle.

My code looks like this:

<!doctype html>
<html>
    <head>
        <title>my first presentation using impress.js</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link href="http://fonts.googleapis.com/css?family=Open+Sans:regular,semibold,italic,italicsemibold|PT+Sans:400,700,400italic,700italic|PT+Serif:400,700,400italic,700italic" rel="stylesheet" />
        <link href="css/impress-demo.css" rel="stylesheet" />
    </head>
    <body>

        <div id="impress">
            <div id="1von4" class="step slide" data-x="0" data-y="0" data-rotate="0">
                <p>This is my first slide.</p>
            </div>
            <div id="2von4" class="step slide" data-x="950" data-y="950" data-rotate="90">
                <p>This is my second slide.</p>
            </div>
            <div id="3von4" class="step slide" data-x="0" data-y="1800" data rotate="180">
                <p>This is my third slide.</p>
            </div>
            <div id="4von4" class="step slide" data-x="-950" data-y="950" data rotate="270">
                <p>This is my fourth slide.</p>
            </div>
        </div>
        <script type="text/javascript" src="js/impress.js"></script>
        <script>impress().init();</script>
    </body>
</html>

It has to look like this in the end. enter image description here

I do not know why it is not working. Help is appreciated.

Was it helpful?

Solution

If you follow the index.html on Bartaz GitHub site, you would see, that you missed a line in configuring your presentation.

<script src="js/impress.js"></script> //add this line and edit the path accordingly
<script>impress().init();</script>

The code for rotating itself looks fine from my point of view. You just need to tinker with the positioning and the x and y axis.

Kind regards

//edit: Check your data-rotate in your third and fourth step. the - is missing, and therefor it does not work, like it should.

<div id="impress">
        <div id="1von4" class="step slide" data-x="0" data-y="0" data-rotate="0">
            <p style="font-size:36px;">This is my first slide.</p>
        </div>
        <div id="2von4" class="step slide" data-x="950" data-y="950" data-rotate="90">
            <p style="font-size:36px;">This is my second slide.</p>
        </div>
        <div id="3von4" class="step slide" data-x="0" data-y="1800" data-rotate="180">
            <p style="font-size:36px;">This is my third slide.</p>
        </div>
        <div id="4von4" class="step slide" data-x="-950" data-y="950" data-rotate="270">
            <p style="font-size:36px;">This is my fourth slide.</p>
        </div>
    </div>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top