Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<pre><code>&lt;html&gt; &lt;head&gt; &lt;!-- You can load the jQuery library from the Google Content Network. Probably better than from your own server. --&gt; &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt; &lt;!-- Load the CloudCarousel JavaScript file --&gt; &lt;script type="text/JavaScript" src="cloud-carousel.1.0.5.js"&gt;&lt;/script&gt; &lt;script&gt; $(document).ready(function(){ // This initialises carousels on the container elements specified, in this case, carousel1. $("#carousel1").CloudCarousel( { xPos: 128, yPos: 32, buttonLeft: $("#left-but"), buttonRight: $("#right-but"), altBox: $("#alt-text"), titleBox: $("#title-text") } ); }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;!-- This is the container for the carousel. --&gt; &lt;div id = "carousel1" style="width:1000px; height:700px;background:#000;overflow:scroll;"&gt; &lt;!-- All images with class of "cloudcarousel" will be turned into carousel items --&gt; &lt;!-- You can place links around these images --&gt; &lt;img class = "cloudcarousel" src="images/Chrysanthemum.jpg" alt="Flag 1 Description" title="Flag 1 Title" /&gt; &lt;img class = "cloudcarousel" src="images/Desert.jpg" alt="Flag 2 Description" title="Flag 2 Title" /&gt; &lt;img class = "cloudcarousel" src="images/Hydrangeas.jpg" alt="Flag 3 Description" title="Flag 3 Title" /&gt; &lt;img class = "cloudcarousel" src="images/Koala.jpg" alt="Flag 4 Description" title="Flag 4 Title" /&gt; &lt;/div&gt; &lt;!-- Define left and right buttons. --&gt; &lt;input id="left-but" type="button" value="Left" /&gt; &lt;input id="right-but" type="button" value="Right" /&gt; &lt;!-- Define elements to accept the alt and title text from the images. --&gt; &lt;p id="title-text"&gt;&lt;/p&gt; &lt;p id="alt-text"&gt;&lt;/p&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload