Oggi vedremo come creare slide contenuti HTML.

Creare slide con JavaScript

Questa slide è compatibile con i maggiori browser in circolazione, molto leggera e d’impatto.

Possiamo inserire tag HTML, elementi flash, i-frame e gestire con molta semplicità e libertà, tutta la struttura tramite fogli di stile esterni css.

Pensate la potenzialità di controllare tutta la slide con un unico css esterno, dai colori, al posizionamento ai contenuti

Ora vediamo il codice e i file sorgenti

  • Richiamiamo i file JS e il CSS

<script type="text/javascript" src="https://www.ajaxdaddy.com/javascript/prototype.js" mce_src="https://www.ajaxdaddy.com/javascript/prototype.js"></script>
<script type="text/javascript" src="https://www.ajaxdaddy.com/javascript/effects.js" mce_src="https://www.ajaxdaddy.com/javascript/effects.js"></script>
<script type="text/javascript" src="https://www.ajaxdaddy.com/javascript/glider.js" mce_src="https://www.ajaxdaddy.com/javascript/glider.js"></script>

Questo invece è il codice da inserire nella pagina HTML

  • Menu in alto

<divclass="controls">
<ahref="section1" mce_href="section1">Section1</a>|
<ahref="section2" mce_href="section2">Section2</a>|
<ahref="section3" mce_href="section3">Section3</a>|
<ahref="section4" mce_href="section4">Section4</a>|
</div>

  • Contenuti dei box SLIDE

<divclass="scroller">
<divclass="content">
<divclass="section"id="section1">
Section1
<p>YoucanputanykindofHTMLinhere:</p>
<imgsrc="files/glider/orange.druplicon.gif" mce_src="files/glider/orange.druplicon.gif"/>
</div>
<divclass="section"id="section2">
Section2
<p>Stylethesectionshoweveryouwant</p>
</div>
<divclass="section"id="section3">
Section3
<p>I-frames?Yes,butonlyifscrollbarsarehidden:</p>
<iframesrc="https://www.example.com" mce_src="https://www.example.com"style="overflow:hidden"></iframe>
</div>
<divclass="section"id="section4">
Section4
<p>Flash?Sort-ofworks:</p>
<objectwidth="200"height="150"><paramname="movie"value="http://www.youtube.com/v/Ef-f7EeDpYI"></param><paramname="wmode"value="transparent"></param><embedsrc="https://www.youtube.com/v/Ef-f7EeDpYI" mce_src="https://www.youtube.com/v/Ef-f7EeDpYI"type="application/x-shockwave-flash"wmode="transparent"width="200"height="150"></embed></object>
</div>
</div>
</div>
</div>

  • Menu Indietro & Avanti

<a href="" mce_href=""onclick="my_glider.previous();returnfalse;">Previous</a>|<ahref="" mce_href=""onclick="my_glider.next();returnfalse">Next</a>
<scripttype="text/javascript"charset="utf-8">
varmy_glider=newGlider('my-glider',{duration:0.5});
</script>

via [AjaxDaddy]

Scarica il sorgente
Guarda il Tutorial

Author

Sono un Creative Strategist con più di 10 anni di esperienza in strategie digitali. Il mio ruolo di Stratega consiste nell’ideare e sviluppare concept creativi per progetti multicanale, individuando le attivazioni e dinamiche di Marketing da applicare attraverso un approccio strategico.

5 Commenti

  1. Ciao Julius,
    sto provando ad inserire un elemento flash in una slide ma quando sono nella pagina adiacente, al di fuori della cornice vedo già l’elemento flash in esterno.
    Sono troppo down ma non riesco a capire come mai :(

  2. O Julius vc poderia mi mandar 1 pagina de exemplo por e-mail!
    vlw e obrigado

  3. Non è proprio quello che cercavo, ma mi sei stato di aiuto comunque. Bel blog!

Commenti