Creare slide di immagini

Agile Carousel

Agile Carousel è un altro plugin di jQuery per la crezione di slide, ricco di funzioni: oltre all’effetto slide permette anche transizioni e dissolvenze, pulsanti avanti-indietro, pulsanti per saltare più “pagine”, auto play, loop, …

link: Agile Carousel

Easy Slider

Per creare degli slide di immagini, cioè quell’effetto in cui delle immagini (o altro contenuto web) si scambiano fra loro scorrendo verso una direzione (verticale od orizzontale), non c’è niente di meglio di un bel plugin per jQuery semplicissimo da implementare: Easy slider jQuery plugin!

La sintassi per usarlo è basilare:

Richiamare i due file Javscript tra i tag Head…

<script type="text/javascript" src="/js/jquery.js"> </script>
<script type="text/javascript" src="/js/easySlider.js"> </script>

…dopodiché impostare il nostro DIV con le immagini inserita in una lista non ordinata…

<div id="slider">
<ul>
<li>immagine 1</li>
<li>immagine 2</li>
<li>immagine 3</li>
</ul>
</div>

Definire il DIV che contiene lo slider…

$("#slider").easySlider();

Configurare i pulsanti AVANTI – INDIETRO…

<span id="prevId"><a href="javascript:void(0);">Previous</a></span>
<span id="nextBtn"><a href="javascript:void(0);">Next</a></span>

Impostare le opzioni (velocità, orizzontale-verticale, ID dei bottoni avanti-indietro).

link: Easy slider jQuery plugin

Accessible News Slider

Accessible News Slider è un altro leggerissimo (solo 2 kb) plugin per jQuery per presentare dei contenuti tramite uno slide.
Questo ha la particolarità di essere totalmente “accessibile”, poiché tutto (css, xhtml e javascript) è stato studiato per rispondere alle linee guida sull’accessibilità dei contenuti web 1.0

  • utenti ipovedenti
  • utenti con vista limitata che non usano screen reader
  • utenti ciechi che usano screen reader
  • utenti che navigano tramite tastiera o strumenti personalizzati
  • browser con javascript disabilitato
  • browser con la visione delle immagini disattivata

link: Accessible news slider

Altri sono arrivati qui cercando:
creare slide, slide immagini, slide foto html, fare slide, slide immagini html, immagini slide, slideshow immagini, slideshow orizzontale, creare slide html, creare slide foto, html slideshow immagini, jquery immagini che scorrono, slider immagini orizzontale.

3 pensieri su “Creare slide di immagini”

  1. s3slider è un altro plugin per jQuery che consente di creare degli slide di contenuto (immagini e testo) in maniera molto rapida e facile.
    Basta includere i 2 file JS necessari (jQuery ed il plugin) e creare un lista non ordinata dentro ad un DIV.

  2. Coda Slider potrebbe essere “la madre” (o il padre) di tutti gli slider! Si tratta di un altro plugin per jQuery.

    Sul sito di css tricks si può trovare un tutorial per migliorare coda slider, e creare uno slider che ci consenta di:
    – inserire differenti tipi di contenuti nei pannelli; si può già fare, ma per farla più semplice qui ci sono già delle strutture pronte all’uso; quella principale è avere un’immagine che riempie il pannello con del testo che sta sopra in trasparenza;
    – auto-play: si possono sempre cliccare le miniature per far scorrere lo slider, ma se non clicchi scorrono anche da sole;
    – frecce sulle miniature che indicano il pannello che stai guardando.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.

Ricevi un avviso se ci sono nuovi commenti. Oppure iscriviti senza commentare.

You can add images to your comment by clicking here.