carousel-3.6.9esercizio5

<!DOCTYPE html>
<html>
<head>
    <style>
        img {display: none; }
        .visibile { display: inline; }
        button {width: 80px;}
        .comandi { float: left; width: 100px; }
        .riempitivo { float: right; width: 100px; }
        .principale { display: inline-block; width: 200px; }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <title>Carousel</title>
</head>
<body>
<h2>Gli elementi alchemici</h2>
<article class="contenitore">
    <div class="principale">
        <img alt="Acqua" class="visibile" src="img/acqua.jpg" />
        <img alt="Aria" src="img/aria.jpg" />
        <img alt="Fuoco" src="img/fuoco.jpg" />
        <img alt="Terra" src="img/terra.jpg" />
    </div>
    <div class="comandi"><br><button id="avanti"> Avanti</button><br><br><button id="indietro"> Indietro</button></div>
    <div class="riempitivo"></div>
</article>
</body>
</html>