Problema slideshow

Ho inserito qui una slideshow che dovrebbe avere dei 'pallini' sotto per scorrere tra le varie pagine, però non si vedono.
Ecco il codice che ho usato

Codice HTML:

<html> <head> <title>Altutto</title> <style type="text/css"> #slideshow {width: 580px; padding: 10px; margin: 10px auto; text-align: center} #slideshow input {display: none} #mask {width: 100%; overflow:hidden} #slides {background: #f7f7f7; padding: 10px; border: 2px solid #ededed; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4), 0 0 0 1px rgba(255, 255, 255, .9), 0 0 10px 0px rgba(0, 0, 0, .1)} .slide_content {position: relative; width: 900%; -webkit-transition: all 800ms cubic-bezier(0.670, 0.000, 0.170, 1.000); -moz-transition: all 800ms cubic-bezier(0.670, 0.000, 0.170, 1.000); -ms-transition: all 800ms cubic-bezier(0.670, 0.000, 0.170, 1.000); -o-transition: all 800ms cubic-bezier(0.670, 0.000, 0.170, 1.000); transition: all 800ms cubic-bezier(0.670, 0.000, 0.170, 1.000)} #pan1:checked ~ #slides .slide_content {margin-left: 0} #pan2:checked ~ #slides .slide_content {margin-left: -100%} #pan3:checked ~ #slides .slide_content {margin-left: -200%} #pan4:checked ~ #slides .slide_content {margin-left: -300%} #pan5:checked ~ #slides .slide_content {margin-left: -400%} #pan6:checked ~ #slides .slide_content {margin-left: -500%} #pan7:checked ~ #slides .slide_content {margin-left: -600%} #pan8:checked ~ #slides .slide_content {margin-left: -700%} .pannello {width: 11.11111111111111%; float: left; font-family: arial; font-size: 12px; color: #646464; text-shadow: 0 1px 1px rgba(255, 255, 255, .7)} #active {margin-top: 5px} #active label {display: inline-block; width: 21px; height: 21px; border-radius: 1em; background: #f7f7f7; border: 2px solid #ededed; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4), 0 0 0 1px rgba(255, 255, 255, .7), 0 0 4px rgba(0, 0, 0, .1); margin: 5px; cursor: pointer} #active label:hover {background: #fff} #pan1:checked ~ #active label:nth-child(1), #pan2:checked ~ #active label:nth-child(2), #pan3:checked ~ #active label:nth-child(3), #pan4:checked ~ #active label:nth-child(4), #pan5:checked ~ #active label:nth-child(5), #pan6:checked ~ #active label:nth-child(6), #pan7:checked ~ #active label:nth-child(7), #pan8:checked ~ #active label:nth-child(8) {background: #d2e9f1; box-shadow: inset 0 0 0 2px #f7f7f7, 0 0 0 1px rgba(255, 255, 255, .7), 0 0 4px rgba(0, 0, 0, .1)} </style> </head> <body bgcolor="lightblue"> <div id="slideshow">  <input checked="checked" type="radio" name="pan" id="pan1"> <input type="radio" name="pan" id="pan2"> <input type="radio" name="pan" id="pan3"> <input type="radio" name="pan" id="pan4"> <input type="radio" name="pan" id="pan5"> <input type="radio" name="pan" id="pan6"> <input type="radio" name="pan" id="pan7"> <input type="radio" name="pan" id="pan8"> <div id="slides"> <div id="mask"> <div class="slide_content"> <div class="pannello" id="p1">  <div style="font-weight: bold; font-size: 20px; text-align: left">Benvenuto!</div><div style="text-align: justify; padding: 0 10px">Benvenuto su altutto.altervista.org! Scorri per vedere le funzioni che ti offriamo.<br> <a href="http://www.net-parade.it/#award;t=9;sito=altutto.altervista.org" title="sito internet"><img alt="sito internet" src="http://tools.net-parade.it/images/09_award_sito_di_qualita.png" border="0" /></a> <a href="http://www.net-parade.it/attestato_riconoscimento.aspx?sito=altutto.altervista.org&t=1"><img alt="In classifica" src="http://tools.net-parade.it/images/01_award_sito_in_classifica.png" border="0"></a> <br><hr><br> <a href="http://www.net-parade.it/risorse/registrazione_motori"><img alt="motori di ricerca" src="http://tools.net-parade.it/images/bottone.gif" style="border:0px"></a> <span id="eXTReMe"><a href="http://extremetracking.com/open?login=altutto"> <img src="http://t1.extreme-dm.com/i.gif" style="border: 0;" height="38" width="41" id="EXim" alt="eXTReMe Tracker" /></a> <script type="text/javascript"> </script><script type="text/javascript"> </script><noscript><span id="neXTReMe"><img height="1" width="1" alt="" src="http://e0.extreme-dm.com/s9.g?login=altutto&j=n&jv=n" /> </span></noscript></span></div> </div> <div class="pannello" id="p2">  <div style="font-weight: bold; font-size: 20px; text-align: left">Forum</div><div style="text-align: justify; padding: 0 10px">Accedi subito al forum che parla di tutto per scrivere tutto ciò che ti passa per la testa e vedere i post degli altri utenti. <br>Con il forum potrai discutere, inviare domande, rispondere a quelle degli altri utenti o scrivere guide su qualunque argomento. Potrai inoltre usufruire del social network integrato. <a href="f">Clicca qui per entrare.</a></div> </div> <div class="pannello" id="p3">  <div style="font-weight: bold; font-size: 20px; text-align: left">Galleria di foto comiche</div><div style="text-align: justify; padding: 0 10px">Vedi subito divertentissime foto comiche che porteranno un raggio di luce anche nelle giornate più buie! <a href="m/comici">Clicca qui per entrare.</a></div> </div> <div class="pannello" id="p4">  <div style="font-weight: bold; font-size: 20px; text-align: left">Galleria di perle di saggezza</div><div style="text-align: justify; padding: 0 10px">Entra subito nella raccolta di illuminanti perle di saggezza. <a href="m/perle-di-saggezza">Clicca qui per entrare</a></div> </div> <div class="pannello" id="p5">  <div style="font-weight: bold; font-size: 20px; text-align: left;">Artists' space</div><div style="text-align: justify; padding: 0px 10px;">Vedi gli ultimi post degli artisti che hanno aderito, scopri in quali eventi incontrarli oppure diventa scrittore anche tu. <a href="a">Clicca qui per entrare.</a></div></div> <div class="pannello" id="p6">  <div style="font-weight: bold; font-size: 20px; text-align: left;">Fluent English</div><div style="text-align: justify; padding: 0px 10px;">Mediante un divertentissimo gioco potrai migliorare notevolmente il tuo inglese divertendoti! <a href="ef">Clicca qui per entrare.</a></div></div> <div class="pannello" id="p7">  <div style="font-weight: bold; font-size: 20px; text-align: left;">La nostra pagina facebook</div><div style="text-align: justify; padding: 0px 10px;">Visita la nostra pagina facebook per essere sempre aggiornato sulle ultime novità del sito! <a href="http://facebook.com/altutto">Clicca qui per entrare.</a></div></div> <div class="pannello" id="p8">  <div style="font-weight: bold; font-size: 20px; text-align: left;">Votaci</div><div style="text-align: justify; padding: 0px 10px;">Votandoci ci aiuterai a crescere. Per votare, clicca su 'Sì, confermo il voto'. Puoi votarci ogni ora. <a href="http://tinyurl.com/votaaltutto>Clicca qui per entrare.</a></div></div></div> </div> </div> <div id="active"> <label for="pan1"></label> <label for="pan2"></label> <label for="pan3"></label> <label for="pan4"></label> <label for="pan5"></label> <label for="pan6"></label> <label for="pan7"></label> <label for="pan8"></label> </div> </div><script type="text/javascript"> //SLIDESHOW A SCORRIMENTO AUTOMATICO //by bored - http://ffmagazine.forumfree.it/?t=65226584 var slideJRadio = document.getElementById("slideshow").querySelectorAll("input[type="radio"]"); var eSlide = 1; var slideJTime; function setSlideTime(){ slideJTime = window.setInterval(function(){ if(eSlide === slideJRadio.length){ eSlide = 0; } slideJRadio[eSlide].checked = true; eSlide++; }, 4000); } setSlideTime(); document.getElementById("slideshow").onmouseover = function(){ window.clearInterval(slideJTime); } document.getElementById("slideshow").onmouseout = setSlideTime; for(var i = 0; i < slideJRadio.length; i++){ slideJRadio[i].onclick=function(){ eSlide = this.id.match(/[0-9]+/) - 1; } } </script> </body> </html>

Cosa ho sbagliato?

Nella pagina che hai linkato non vedo nessuna slideshow.

Infatti il problema è questo, ho impostato la slideshow usando il codice che ho trascritto, ma viene visualizzata solo la prima pagina e non ci sono i 'child' (cioè i bottoni per cambiare slide).

Facendo un ispezione con chrome, ho notato che lo slideshow è tutto inserito a sinistra ma invisibile, perché non contiene niente, e poi ho notato che manca la libreria JQuery.

Non contiene niente? Allora deve essere stato l'editor di file di altervista che ogni tanto fa questi scherzetti.
Pensavo non fosse necessaria, lo è?

La libreria jQuery è essenziale, comunque ti consiglio di mettere un bordo provvisorio al div principale dello slideshow, così almeno vedi dove è collocato.

ok, grazie :)
Comunque ho trovato un errore, non avevo chiuso un tag...

Ho visto il risultato, e devo dire che è molto meglio dell'index precedente.

Grazie per il feedback :)